Angular Data Binding – Part I

Angular provides many kinds of data-binding. Binding types can be grouped into three categories by the direction of data flow:

• From the source-to-view
  • Interpolation
    • Example: {{ value }}
  • Property
    • Example: [property]=”value”
    • Binding Target
      • Element property
      • Component property
      • Directive property
  • Attribute
    • Example: [attr.nameOfAttribute] =”value”
    • Binding Target
      • Attribute
  • Class
    • Example: [class]=”value” [class.cssClassName]=’value’
    • ngClass: adds and removes a set of CSS classes.
      • [ngClass]=”addMyClasses()”
    • Binding Target
    • class Property
  • Style
    • Example: [style.cssStyleProperty]=”value”
    • ngStyle: adds and removes a set of HTML styles
      • [ngStyle]= “addMyStyles()”
    • Binding Target
      • style Property
• From view-to-source
  • Event
    • Example: (event)=”function”
    • Binding Target
      • Element event
      • Component event
      • Directive event
• Two Way view-to-source and source-to-view
  • Two way binding  
    • ngModel: adds two-way data binding to an HTML form element.
      • Example: [(ngModel)]=”value”
    • Binding Target
      • Event and Property

Interpolation

• Interpolation is used display a component property in the view template with double curly braces.
• Interpolation moves data in one direction from components to HTML elements.
• We can display properties data into view like string, number, date, arrays, list etc.,
• Few Interpolation examples
  • Displaying property values in view template
  • Calling methods and display return values in view template
  • Evaluating arithmetic expressions
  • Displaying array item values in view template
  • Binding data to HTML tags, Angular Material Components etc.,

Example 1: Displaying property values in view template

app.component.html
==================

<h1>{{"userName"}}</h1>
<h4><img src="{{ imageURL }}" ></h4>

app.components.ts
=================

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

    imageURL : string ="http://www.xyzwebsite.com/images/xyzimage.png";
    // above use your own image url
    userName = 'Girish';
}

Example 2: Calling methods and display return values in view template

app.component.html
==================

<h2>Hello {{"userName"}}</h2>
<h2>Have a pleasant{{ getGreeting() }}!</h2>

app.components.ts
=================

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

    imageURL : string ="https://www.ebasiq.com/images/logo-wide.png";
    userName = 'Girish';
    getGreeting(): string {
    return 'very good morning';
    }
}

Example 3: Evaluating arithmetic expressions

<h1>{{2 + 4 }}</h1>

Example 4: Displaying array item values in view template

app.component.html
==================
<div>
  <table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Designation</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor='let person of persons'>
            <td>{{person.name}}</td>
            <td>{{person.designation}}</td>
            <td>{{person.city}}</td>
        </tr>
        <tr *ngIf="!persons || persons.length==0">
            <td colspan="3">
                No persons to display
            </td>
        </tr>
    </tbody>
</table>
</div>

app.components.ts
=================

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

   persons: any[] = [{ 
    name: "Sanjay", 
    designation:"CTO" ,
    city: "Hyd"
 },
 { 
    name: "Ramesh", 
    designation:"AVP" ,
    city: "Vizag"
 },
 { 
    name: "Ganesh", 
    designation:"CIO" ,
    city: "Bangalore"
 }
]; 
}

Example 5: Binding data to HTML tags

app.component.html
==================
<div>
<select>
    <option *ngFor = "let x of weeks">{{x}}</option>
  </select>
</div>
app.components.ts
=================

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 
 weeks = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", 
            "Friday", "Saturday"];
  
}

References

• https://angular.io/guide/template-syntax

Learn more about Property binding, Style binding, Class binding, Atrribute binding, Event binding, Two Way binding in the upcoming Angular Blog Articles.

Happy Learning!