Thursday, June 18, 2020

Angular Custom Two-Way Data Binding

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" (click)="dec()" title="smaller">-</button>
  <button class="btn btn-primary" (click)="inc()" title="bigger">+</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;
    @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 even 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-md-10">       
      <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

  1. Angular Custom Property Binding Using @Input Decorator
  2. Angular Custom Event Binding Using @Output Decorator
  3. Angular Style Binding With Examples
  4. Angular @Input and @Output Example
  5. Angular ngSwitch Directive With Examples

You may also like-

  1. Injector Hierarchy and Service Instances in Angular
  2. Angular - Call One Service From Another
  3. Angular Disable Button Example
  4. Angular Project Structure With File Description
  5. Java String Interview Questions And Answers
  6. BlockingQueue in Java Concurrency
  7. Spring Boot spring-boot-starter-parent
  8. Apache Avro Format in Hadoop