What do you mean by data binding in Angular 13?- 2024

Data binding is the way to provide communication between DOM and the component.it provides the simple process of data pushing or pulling between the component and the DOM template.

Listed below are the four types of data binding in Angular:

  • One way binding
  • two-way binding
  • Event binding
  • Property binding
  • String interpolation

1). one-way data binding

one way of databinding in Angular is the process to pass data from Component to view template or View Template to Component.

  • data flow in one-way data bindings uni-directional.
  • This means data flow from components typescript file to view Html file.
  • In one-way binding, we used the property binding concept in Angular.
  • In property binding, we encapsulate the variable in Html with {{ textVar }} brackets.
  • We will understand this concept through an example in order to make it more comprehensible.

Example

In .ts File

export class DemoComponent implements OnInit {

  textVar = 'Angular Tutorial Piyushmaurya';

  constructor() { }
  ngOnInit() {}
}
  
in .html file 


<h2>{{ textVar }}</h2>

2). Two-way Data Binding in Angular

In two-way data binding data flow between both the component class and HTML templates file.if you have to change the data value from one place the value will change from another end. e.g, if have a textbox in an HTML templates file, when you change the value, it’s also will change the value-form component class property.

Two-way data binding will perform the following 2 actions, one is the Set the property of a component class and the second one is the event listener from DOM elements.

two-way data binding using the property squire brackets ([]).

Example .html templates file

<h2>Two-way Binding Example</h2>    
   <input [(ngModel)]="fullName" /> <br/><br/>    
<p> {{fullName}} </p>  
in component .ts file

export class AppComponent {    
  fullName: string = "Hello Piyushmaurya";    
}    

3). Event Binding

In event binding the data will capture using events like click, change e.t.c

for example

in HTML templates file

<button (click)="checkStatus()"></button> 

in .ts component files

export class AppComponent {      
  checkStatus($event){    
    console.log("Save button is clicked!", $event);    
  }    
}  

4). Property Binding

Property Binding is the one-way data binding process. we are passing the DOM element value-form component class.

For Example,

In Component.ts file

import { Component } from '@angular/core';	
@Component({	
selector: 'app-root',	
templateUrl: './app.component.html',	
styleUrls: ['./app.component.css']	
})	
export class AppComponent {
src = 'https://www.piyushmaurya.in/wp-content/uploads/gfg_200X200-1.png';
}

in .html template file

<img [src]='src' className="img_tag">

5). String interpolation Data binding

String Interpolation in Angular 13 is a one-way data-binding technique that is used to dataflow from the TypeScript code to an HTML template (view)

Example

In Html Templates

<p>{{compName}}</p>

in .ts file


export class AppComponent {   
  title = "piyushmaurya.in";
}

Discover more from STRUGGLER KING.COM

Subscribe now to keep reading and get access to the full archive.

Continue Reading