How to make ngModel available between components

Question

I am seriously getting mad. I have tried everything. FormsModules,ReactiveForms,FORMDIRECTIVES,Input,Output i've been searching everywhere on how to make ngModel available between components. I am trying to show in an h1 tag the value which is being typed/deleted in the input tag using string interpolation, however it isn't working, these are the files: 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>

If you can figure it out I would be so grateful.

Answer 1

You actually searched it but did not use it, the solution to your problem is @Input and @Output. I believe you did not use this effectively.

Since the other components is governed by a component called AppComponent you just simply need to put those data in it:

import { Component } from '@angular/core';
// The other imports are not necessary

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent
{
   // declare those stuffs
   title: string;
   note:  string;

   constructor()
   {
        this.title = "";
        this.note  = "";
   }
}

then in your AppComponent template

<div class="container">
  <app-input [title]="title"
             [note]="note"
            // you should return $event always or else it will return undefined
             (onTitleChange)="title = $event"
             (onModelChange)="note = $event">
  </app-input>
  <app-notes [title]="title"
             [note]="note">
  </app-notes>
</div>

where [ ] are @Input and ( ) are @Output from the component

so your InputComponent will have:

// add these to your existing InputComponent
import { Input, Output, EventEmitter } from "@angular/core";

export class InputComponent
{
  @Input("title") title: string;

  @Input("note") note: string;

  @Output() onTitleChange = new EventEmitter();

  @Output() onNoteChange = new EventEmitter();
}

where @Input is the data your recieve and @Ouput is the data you send.

and your InputComponent template would be:

<div class="container" id="noteCreate">
  <form id="titleInputForm">
    <input type="text"
           name="title"
         [(ngModel)]="title"
          (ngModelChange)="onTitleChange.emit(title)">
    <textarea name="note"
              rows="8"
              cols="80"
            [(ngModel)]="note"
             (ngModelChange)="onNoteChange.emit(note)">
    </textarea>
  </form>
</div>

where setting [(ngModel)] with your @Input and (ngModelChange) to trigger @Output when modal has changed.

In this example you can actually set default values from AppComponent to InputComponent.

If you understand @Input correctly in these example I do not need to put what would be inside NotesComponent

hope that helps.