Skip to content
Related Articles

Related Articles

AngularJS | Data Binding
  • Difficulty Level : Basic
  • Last Updated : 21 May, 2019

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




<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>

app.component.ts




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

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




<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">

app.component.ts




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";
}

Output:
propertybinding


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

Syntax:




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

app.component.html




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

app.component.ts




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');
   }
}

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




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

app.component.ts




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

Output:
Twoway

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :