In the post Angular Two-Way Data Binding With Examples we saw how two way binding can be done using ngModel and it is a combination of both property binding and event binding. In this post we’ll see how to do custom two way data binding in Angular.
Angular custom two way data binding
You can use a custom property for two way data binding, for example-
<app-counter [(counter)]="counterValue"></app-counter>
Here counter is a property that has two way data binding. In the component you should have a counter property that can be assigned a value and a corresponding event named counterChange. Note that this convention has to be followed, the event name has to be ‘property name + change’.
Angular custom two way data binding example
Here is a simple example of custom two way data binding. There is a child component that displays the counter value and has buttons to decrement or increment counter value.
counter.component.html
<div>
<label>Value </label> {{counter}}
<hr/>
<button class="btn btn-primary me-2" (click)="dec()">-</button>
<button class="btn btn-primary" (click)="inc()">+</button>
</div>
counter.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-counter',
templateUrl: './counter.component.html'
})
export class CounterComponent{
@Input() counter: number = 0;
//event name has to be 'property name + change'
@Output() counterChange = new EventEmitter<number>();
dec(){
--this.counter;
this.counterChange.emit(this.counter);
}
inc(){
++this.counter;
this.counterChange.emit(this.counter);
}
}
In the component, counter property is decorated with @Input decorator which means property binding where value of counter is expected from the parent component through this binding.
There is also an event binding done using counterChange. Whenever decrement or increment button is clicked value of counter is changed and that changed value is emitted using counterChange event emitter.
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent{
counterValue = 5;
}
app.component.html
<div class="container">
<div class="row">
<div class="col-sm-6">
<app-counter [(counter)]="counterValue"></app-counter>
<label>Value of the counter is </label> {{counterValue}}
</div>
</div>
</div>
Here AppComponent.counterValue is two-way bound to the CounterComponent. counter property of CounterComponent gets its initial value from AppComponent.counterValue ( counterValue = 5 in AppComponent). Clicking the decrement and increment buttons updates the AppComponent.counterValue via the two-way binding.
So, there is a property binding where child property is bound to the parent property and there is also an event binding from child to parent causing the change in counter value.
Initial screen
On clicking decrement.
That's all for this topic Angular Custom Two-Way Data Binding. If you have any doubt or any suggestions to make please drop a comment. Thanks!
>>>Return to Angular Tutorial Page
Related Topics
You may also like-