Using Two-Way Data Binding
Two-way data binding combines the input and output binding into a single notation using the ngModel directive.
<input [(ngModel)]="name" >
What this is doing behind the scenes is equivalent to:
<input [ngModel]="name" (ngModelChange)="name=$event">
To create your own component that supports two-way binding, you must define an @Output property to match an @Input, but suffix it with the Change, for example:
@Component({/*....*/})
export default class Counter {
@Input() count: number = 0;
@Output() countChange: EventEmitter<number> = new EventEmitter<number>();
increment() {
this.count++;
this.countChange.emit(this.count);
}
}
@Component({
template:'<counter [(count)]="myNumber"></counter>'
directives:[Counter]
})
class SomeComponent {
// ...
}