Angular Banana in a Box Example


For example, we have an input element with ngModel input and ngModelChange event:

<input [ngModel]="value" (ngModelChange)="value=$event" />

To make it banana in a box we need to change this construction to the two-way data binding:

<input [(ngModel)]="value" />

If you have a custom input you need to use the inputChange pattern:

export class AgeComponent {
  @Input()  age: number = 0;
  @Output() ageChange = new EventEmitter<number>();
<age-component [(age)]="16"></age-component>

Remember, that two-way binding can create a hardly understandable data flow in your app.

comments powered by Disqus