How use Data Binding in angular

What is One-way Data Binding?

As you know  data binding will bind the data from the component to the view (DOM) or from view to the component. This data binding is work unidirectional and you can only bind the data from component to the view or from view to the component.

There are many techniques of data binding which use one-way data binding to bind data from component to view. Below are some of the techniques, which uses one-way data binding.

Interpolation Binding: Interpolation refers to binding expressions into marked up language.

Property Binding:This  Property binding is used to set a property of a view element. The binding sets the property to the value of a template expression.

Attribute Binding: This Attribute binding is used to set a attribute property of a view element.

Class Binding: This Class binding is used to set a class property of a view element.

Style Binding:This  Style binding is used to set a style of a view element.

Let's consider an example using the interpolation technique where we are binding two values, firstName and the lastName, to the view, enclosed in double curly braces: {{property Name}}.

In this example, the data binding is done from component to the view. Any changes to the values in the component will be reflected in the view not vice-versa.

File Name: app.component.ts

import { Component } from "@angular/core";

@Component({

  selector: 'app-example',

  template: `

              <div>

              <strong>{{firstName}}</strong>

               <strong>{{lastName}}</strong>

              </div>

              `

})

export class AppComponent {

  firstName: string = "Yallaling";

  lastName:string = "Goudar";

}

typescript

Now Let's consider another example using property binding. In this example, we are binding one value, firstName, to the innerHTML property of the span tag. It will bind the value of firstName to the span element.

import { Component } from "@angular/core";

@Component({

   selector: 'app-example',

  template: `

              <div>

              <span [innerHTML]='firstName'></span>                

              </div>

              `

})

export class AppComponent {

  firstName: string = "Yallaling";

}

typescript:

Let's consider one more example of style binding. In this example, we are binding a color style to the 'h1' element. It will display the text within the h1 tags in a blue color.

<h1 [style.color]="blue">This is a Blue Heading</h1>

html

From View to Component:

One-way data binding from view to the component can be achieved by using the event binding technique.

Let's consider an example where within parentheses on the left of the equal sign we have the target event like "click" and on the right side we may have the template statements such as component properties and methods(myFunction() in this case) bind to the event.

<button (click)="myFunction()">Show alert</button>

html

In the above code, the myFunction() method in the component will be called when user clicks on the button.

Filename app.component.ts

import { Component } from "@angular/core"; 

 @Component({ 

    selector: 'app-example', 

   template: `<button (click)='myFunction()' >Show alert</button>` 

 }) 

 export class AppComponent { 

   myFunction(): void { 

       alert('Show alert!'); 

   } 

}

typescript

Once you run the above code, you will see a button with text "Show alert". When you click that button, it will call the myFunction() method in the component, which will, in turn, execute the alert() method, showing an alert box with the text "Show an alert".

Two-way Data Binding in Angular

Two-way data binding in Angular will help users to exchange data from the component to view and from view to the component. It will help users to establish communication bi-directionally.

Two-way data binding can be achieved using a ngModel directive in Angular. The below syntax shows the data binding using (ngModel), which is basically the combination of both the square brackets of property binding and parentheses of the event binding.

<input type="text" [(ngModel)] = 'val' />

html

Before using ngModel to achieve two-way data binding, it’s very important to import the FormsModule from @angular/forms in app.module.ts file as shown below. FormsModule will contain the ngModule directive.

Filename app.module.ts

import { NgModule } from '@angular/core'; 

import { BrowserModule } from '@angular/platform-browser'; 

import { FormsModule } from "@angular/forms"; 

 import { AppComponent } from './app.component'; 

import { FormsModule } from "@angular/forms";

 @NgModule({ 

   imports: [BrowserModule, FormsModule], 

   declarations: [ AppComponent], 

   bootstrap: [AppComponent] 

}) 

export class AppModule { }

typescript

If you do not import the FormsModule, then you will get Template parse errors and it will result in this error:

"Can't bind to 'ngModel' since it is not a known property of 'input'".

After importing the FormsModule, you can go ahead and bind data using (ngModel) as shown below.

import { Component } from '@angular/core'; 

 @Component({ 

   selector: 'app-example', 

   template: ` 

               Enter the value  : <input [(ngModel)] ='val'> 

               <br> 

                Entered value is:  {{val}} 

             ` 

}) 

export class AppComponent { 

   val: string = ''; 

}

typescript

Once we run the above code,