AngularJS | Data Binding - GeeksforGeeks

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) Interpolation2) Property Binding3) Event Binding4) 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;}
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";  image="https://media.geeksforgeeks.org         /wp-content/uploads/geeksforgeeks-6.png";}
Output:
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:
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:
Picked
AngularJS
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Angular Libraries For Web Developers
Angular File Upload
What is AOT and JIT Compiler in Angular ?
Auth Guards in Angular 9/10/11
How to use <mat-chip-list> and <mat-chip> in Angular Material ?
Angular | keyup event
How to make a Bootstrap Modal Popup in Angular 9/8 ?
How to Display Spinner on the Screen till the data from the API loads using Angular 8 ?
Angular 10 (blur) Event
How to create module with Routing in Angular 9 ?