javascript - コンポーネント間で ngModel を利用可能にする方法

Question

私は真剣に怒っています。私はすべてを試しました。FormsModules、ReactiveForms、FORMDIRECTIVES、Input、Output コンポーネント間で ngModel を使用できるようにする方法をあらゆる場所で検索してきました。文字列補間を使用して入力タグで入力/削除されている値を h1 タグに表示しようとしていますが、機能していません。これらはファイルです: app.component.html:

<div class="container text-center" id="headerCont">
  <a href="index.html"><span style="color: #6E2435" class="header">note</span><span style="color: #6BBFDE" class="header">it</span></a>
</div>
<div class="container">
  <app-input></app-input>
  <app-notes></app-notes>
</div>

app.component.ts

import { Component, OnInit, Input, Output } from '@angular/core';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

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

notes.component.html

<div class="col-xs-2">
  <h1>{{ TitleInput }}</h1>
  <p>{{ noteInput }}</p>
</div>

input.component.html

<div class="container" id="noteCreate">
  <form id="titleInputForm">
    <input type="text" [(ngModel)]="TitleInput" name="TitleInput">
  </form>
  
<form>
    <textarea name="name" rows="8" cols="80">
    </textarea>
</form>
</div>

あなたがそれを理解することができれば、私はとても感謝しています.