Binding Syntax – A Review of Template Syntax

Data Binding is the communication between the DOM and the Component and maybe classified into four different types:

  1. Interpolation
  2. One Way Binding
  3. Event Binding
  4. Two Way Binding

Interpolation

Communication Directions: To the DOM from the component

Syntax: {{ student.name}}  and would display the students name:

Student Name: Jane Doe

import { Component } from '@angular/core'

@Component({
    selector:'student-data',
    template:`
       <div> Student Name: {{student.name}} </div>
    '
 })
 export class StudentDataComponent(){
    student: IStudent = {
       name:"Jane Doe",
       email:"jane@gmail.com",
       cell:"453-123-1212"
    }
 }

One Way Binding

Communication Directions: To the DOM from the component

Syntax:

<h3 [innerText]= "student.name" ></h3>

 and would display the students name:  Jane Doe

Example #1

<div [style.visibility]= "isRabbit? 'visible':'hidden'">
   <img [src]="imagePath">
   <br/>
   <a [href]="link">{{rabbit}}</a>
</div>
  • Any HTML Element Property

Event Binding

Communication Directions: From the DOM to the component

Syntax:   <button (click) = “onClick” > OK </button>

import { Component } from '@angular/core'

@Component(
   { selector: 'button-message', 
     template: ` 
       <button (click) = "onclick()"> OK </button> ` 
   }) 
export class ButtonMessageComponent { 
   OnClick(){ console.log("Logging OK button click") 
   } 
}

Two Way Binding

Communication Directions:  To and from the DOM to and from the component.

Syntax:   <input [(ngModel)] = {{student.name}}>

This can be remembered as banana in a box it is short hand for a combination of the two bindings “one way” and “event”. It is a great performance improvement over the AngularJS two way binding.

<input [(ngModel)]= {{student.name}}>

Online Reference: Binding syntax overview

Online Example: Code

Leave a Reply

Your email address will not be published. Required fields are marked *