Как я могу передать / использовать переменную (или свойство, например, [(ngModel)] = "ush") childComponent для / в parentComponent?

Question

и мой родительский компонент .ts:

 import { Component, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

  // @ViewChild('test') appgreetcomponentreetComponent;

  ngAfterViewInit(): void {
  }    
  constructor() {
  }    
}

и мой родительский Html, в котором я хочу использовать ush (или us = ush) в:

<app-greet-component> 
<h1 class="head">Hello {{ us }}</h1><br>
<br><button type="button" btnp>Click here {{ us }}</button>
</app-greet-component>

и мой дочерний компонент.ts, что я поместил переменную 'ush' в публичную переменную с именем 'us' (но она не определена) и собираюсь использовать это в моем родительском html:

import { Component, OnInit, Input, Output, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-greet-component',
  templateUrl: './greet-component.component.html',
  styleUrls: ['./greet-component.component.css']
})

export class GreetComponentComponent implements OnInit {
  ush:any;
  public us = this.ush; 

  clic(){
    console.log(this.us);    
  }

  greet = 'Welcom to our restaurant! We are best in service.';  

  constructor() { } 

  ngOnInit() {
  }
}

и моем дочернем html, что я беру здесь ushпо ngModel и хочу использовать это в моем родительском html, как указано выше:

    <div>
      your name: 
      <input type="text" #userName [(ngModel)]="ush">
      <ng-content select=".head"></ng-content>
      {{ greet }}<br> 
      <ng-content select="[btnp]"></ng-content>
      <br><br><br>
      <button type="button" (click)="clic()">click</button>
    </div>

Пожалуйста, помогите мне сделать это следующим образом, значит, что я должен добавить или удалить?