Pablo Ivan Pablo Ivan - 4 months ago 21
AngularJS Question

Bind ngModel value across components

Say you have about.component.ts with the following:

import { Component } from '@angular/core';

@Component({
selector: 'about-section',
template: `
<input [(ngModel)]="name" placeholder="First Name">
<p>{{name || 'user'}}</p>
`
})

export class AboutComponent {

}


Then you have notes.component.ts:

import { Component } from '@angular/core';

@Component({
selector: 'notes-section',
template: `
<p>{{name || 'user'}}</p>
`
})

export class NotesComponent {

}


Both files are components of 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 { }


My question is, how would you bind the ngModel 'name' property from about.component.ts to notes.component.ts so whenever you write your name, the change is reflected both in the notes component and the about component?

Answer

One way to do it is using EventEmitter:

@Component({
  selector: 'about-section',
  template: `
    <input [ngModel]="name" (ngModelChange)="name = $event; modelChanged.emit($event)">
    <p>{{name || 'user'}}</p>
  ` 
})
export class AboutComponent {
  @Output() modelChanged = new EventEmitter();
}

@Component({
  selector: 'notes-section',
  template: `<p>{{name || 'user'}}</p>` 
})
export class NotesComponent {}

@Component({
  selector: 'my-app',
  template: `
   <about-section (modelChanged)="notes.name = $event"></about-section>
   <notes-section #notes></notes-section>`,
  directives: [AboutComponent, NotesComponent]
})
export class AppComponent { }

Check demo plunker here

Comments