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


Communication Directions: To the DOM from the component

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

Student Name: Jane Doe

import { Component } from '@angular/core'

       <div> Student Name: {{}} </div>
 export class StudentDataComponent(){
    student: IStudent = {
       name:"Jane Doe",

One Way Binding

Communication Directions: To the DOM from the component


<h3 [innerText]= "" ></h3>

 and would display the students name:  Jane Doe

Example #1

<div [style.visibility]= "isRabbit? 'visible':'hidden'">
   <img [src]="imagePath">
   <a [href]="link">{{rabbit}}</a>
  • 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'

   { 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)] = {{}}>

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)]= {{}}>

Online Reference: Binding syntax overview

Online Example: Code

Leave a Reply

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