Angular JS Two way Data Binding

Basics of two-way binding

Two-way binding does two things:

Sets a specific element property.
Listens for an element change event.

In Angular JS two way data binding is denoted by [()] its also called banana sign.

This is combination of property binding “[]” and event binding “()”

Two way binding helps user to setup communication between component to view and view to componetn so its bi directional communicaiton that will help user.

This will be useful when user changes anything in child component and that value needs to be reflected in parent component .

In Angular formmodule ngModel will provide two binding between component and view .

In todays example we will see Two way binding between Angularjs child and parent component.

In this Example we will pass color from parent to child while intantiation and then change color form child .

When color in child element get changed it should get reflected in parent component

Create your AngularJs Application

Please follow steps mentioned in below post

Hello World with Angular JS

Prerequisites Angularj JS new version is using nodejs for setting up application and for running applicaion you will also need any code editor tool. For current setup we are using visual code studio Kindly down load latest version of nodejs and visual code studio on your machine and complete setup Node Installation 1 Go to…

by lazzygeek 26th Jul 20203rd Aug 2021

2. Create Child Component

ng generate component twowaypropertychange

3. Edit twowaypropertychange.component.ts

In this component we have declared one input varibale in which we will get value from parent component and we will modify that variable and same will be get passed to parent using output event.

Kindly use below naming convention for input and output .keep same name as prefix( e.g. childcolor) and then ass suffix as Change to it.

Here when function is changing value we are emitting same value to parent variable by passing child elements input variable back.

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';


@Component({
  selector: 'app-twowaypropertychange',
  templateUrl: './twowaypropertychange.component.html',
  styleUrls: ['./twowaypropertychange.component.css']
})
export class TwowaypropertychangeComponent  {

  @Input()
  childcolor: string;

  @Output()
  childcolorChange = new EventEmitter<string>();


  change()  {
this.childcolor = 'green';
this.childcolorChange.emit(this.childcolor);
  }


}

4. Edit HTML File twowaypropertychange.component.html

Here we are adding button which will be get clicked to change color and change() function will get called.

We are using childcolor variable to assign to color style

</blockquote>
<h4>Child Color:{{childcolor}}</h4>
<br>

<button class="btn waves-effect waves-light"  (click)="change()">Change to Green</button>
<h1 [(style.color)]="childcolor" > Twoway Child</h1>

5. Add Materialize css in index.html

In Index.html we will add materialize css and js file to use elegant UI

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularJSTwoWayDataBanding</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
       
</head>
<body>
  <app-root></app-root>
</body>
</html>

6. Edit app.component.ts : This is parent component

In Parent we have declared variable and initial color will be red.

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() { }
  title = 'AngularJSTwoWayDataBanding';


  parentcolor = 'red';

}

7. Edit app.component.html

Whenever you will use child component you have to use child input variable which need two way binding in [()] and pass parent property for which you want two way binding. like below screenshot

</div>
<div class="card-panel   blue lighten-3">  <h3>Two Way Data Binding with  Parent Child</h3><app-twowaypropertychange [(childcolor)]="parentcolor"></app-twowaypropertychange>
<h4>Parent Color:{{parentcolor}}</h4><h3 [style.color]="parentcolor" > Parent Component</h3></div>

8. Run Application

If you clone entire project then first run npm install so all dependencies will get downloaded.

Then run below command

ng serve --open

You will get below kind of output for your project once it get compiled and it will open your application in browser

9. Check Outpput

go to http://localhost:4200 path in browser

We have set up red color in parent and passed same in child

We need to click change to green button so we will see data change between parent and child

After clicking button you will get below output

This example demonstrated that value can be passed form parent component to child but if child modifies this value it will be reflected in parent as its used two way data binding. Changed value will be emitted by child and same will b e get reflected in parent by angularjs. This way you can establish bidirectional communication between parent and child.

Source Code:https://github.com/letsblogcontent/AngularJS/tree/master/AngularJSTwoWayDataBanding