If you have a file named about.component.ts, it would contain the following code:
import { Component } from '@angular/core';
@Component({
selector: 'about-section',
template: `
<input [(ngModel)]="name" placeholder="First Name">
<p>{{name || 'user'}}</p>
`
})
export class AboutComponent {
}
In addition to that, there is another file called notes.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'notes-section',
template: `
<p>{{name || 'user'}}</p>
`
})
export class NotesComponent {
}
These two files are components of yet another file named app.component.ts:
import { Component } from '@angular/core';
import { AboutComponent } from './about.component';
import { NotesComponent } from './notes.component';
@Component({
selector: 'my-app',
template: `
<about-section></about-section>
<notes-section></notes-section>
`,
directives: [AboutComponent, NotesComponent]
})
export class AppComponent { }
Moving on to my question, what would be the approach to bind the ngModel 'name' property from the about.component.ts file to the notes.component.ts file? This means that any changes made to the name property in one component should also reflect in the other component.