Angular 2 ngModel in child component updates parent component property

We can use the [(x)] syntax in the parent template to achieve two-way databinding with the child. If we create an Output property with the name xChange, Angular will automatically update the parent property. We do need to emit() an event whenever the child changes the value however: import {Component, EventEmitter, Input, Output} from ‘angular2/core’ … Read more

Angular2 Dynamic input field lose focus when input changes

This happens when the array is a primitive type, in your case a String array. This can be solved by using TrackBy. So change your template to match the following: <div *ngFor=”let value of field.values; let i=index; trackBy:trackByFn”> <input type=”text” [(ngModel)]=”field.values[i]” /><br/> </div> <div> <button (click)=”addValue(field)”>Click</button> </div> and in the ts file add the function … Read more

Using Pipes within ngModel on INPUT Elements in Angular

You can’t use Template expression operators(pipe, save navigator) within template statement: (ngModelChange)=”Template statements” (ngModelChange)=”item.value | useMyPipeToFormatThatValue=$event” https://angular.io/guide/template-syntax#template-statements Like template expressions, template statements use a language that looks like JavaScript. The template statement parser differs from the template expression parser and specifically supports both basic assignment (=) and chaining expressions (with ; or ,). However, certain … Read more