AngularJS | Data Binding

Angular provides a function Data Binding which helps us to have an almost real-time reflection of the input given by the user i.e. it creates a connection between Model and View. There are many types of bindings but we will focus on -:
1) Interpolation
2) Property Binding
3) Event Binding
4) Two-way Binding

Interpolation:
Angular interpolation is used display a component property in the respective view template with double curly braces syntax. Interpolation is used to transfer properties mentioned in component class to be reflected in its template.

Syntax-: class="{{variable_name}}"

Eg-:
app.component.html



filter_none

edit
close

play_arrow

link
brightness_4
code

<h3>Binding Types</h3>
<P>Interpolation</P>
<br>
<h5>Addition of 3 and 5 with Interpolation is {{3+5}}</h5>
<h5>Addition of 3 and 5 without Interpolation is 3+5</h5>
<h2>{{val}}</h2>

chevron_right


app.component.ts

filter_none

edit
close

play_arrow

link
brightness_4
code

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  val: string;
}

chevron_right


Interpolation


Property Binding:
Similar to Java, variables defined in the parent class can be inherited by child class that is templates in this case. The only difference between Interpolation and Property binding is that we should not store non-string values in variables while using interpolation. So if we have to store Boolean or other data types than use Property Binding.

Syntax-: [class]="variable_name"

app.component.html

filter_none

edit
close

play_arrow

link
brightness_4
code

<h3>Binding Types</h3>
<p>Property Binding</p>
<input type="text" ng-bind="{{ Geeks }}"><br>
<h5>Learning Property binding on {{ Geeks }}</h5>
<img [src]="image" height="50px" weight="40px">

chevron_right


app.component.ts

filter_none

edit
close

play_arrow

link
brightness_4
code

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Geeks';
  classtype ="text-danger";
  Geeks= "GeeksforGeeks";
         /wp-content/uploads/geeksforgeeks-6.png";
}

chevron_right


Output:
propertybinding


Event Binding:
An event is created whenever either a key is pressed or on a mouse click.

Syntax:

filter_none

edit
close

play_arrow

link
brightness_4
code

  <button class="btn btn-block" (click)=showevent($event)>Event</button
showevent(event)
      alert("Welcome to GeeksforGeeks");   
}  

chevron_right


app.component.html

filter_none

edit
close

play_arrow

link
brightness_4
code

<h3>Binding Types</h3>
<P>Event Binding</P>
<button class="btn btn-block" (click)="Clickme($event)">
    Click Here
</button>

chevron_right


app.component.ts


filter_none

edit
close

play_arrow

link
brightness_4
code

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Geeks';
  Clickme(event) {
    alert('Welcome to GeeksforGeeks');
   }
}

chevron_right


Output:
EventBinding

Two way Binding:
In app.module.ts we have to include FormsModule in imports like the way given down also we have to import FormsModule. We have to include FormsModule since ngModel is not a property included in the project we develop using ng new project-name so we have to include it by importing this Module.

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

  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
  ],

app.component.html

filter_none

edit
close

play_arrow

link
brightness_4
code

<h3>Binding Types</h3>
<P>Two Way Binding</P>
<input type="text" placeholder="Enter text" [(ngModel)]="val">
<br>
{{ val }}

chevron_right


app.component.ts

filter_none

edit
close

play_arrow

link
brightness_4
code

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  val: string;
}

chevron_right


Output:
Twoway



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.