2 Way Data Binding Vs 1 Way Data Binding


1 Way data binding Add input using 1 way data binding to the input. This will update only in a single direction. If it gets updated anywhere in the component, it will not update because it’s not using 2 way data binding. In order to use 1 way data binding, we need to access the event using the $event.
< p >{{name}}< /p >
< input type=“text” class=“form-control” (input)=“onUpdateName($event)” />

Within the component, we create a new method called onUpdateName(event: any) passing in the parameter called event of type any.

onUpdateName(event:any){ this.name = event.target.value; }

2-Way data binding It will update the value of the input element if we change the variable somewhere else. In order to use 2 way data binding, we have to import the FormsModule to enable ngModel.
< input type=“text” class=“form-control” [(ngModel)]=“name” />

comments powered by Disqus