Angular: Binding end to end

Binding creates a live connection between view and model. Angular's change detection algorithm is responsible for keeping the view and model in sync.

Examples of Binding:

Text Interpolation: It embeds expressions into view using pair of double curly braces as {{expression}}.

Ex:

// app.component.ts (Referred as model)

export class AppComponent {

title = 'Data Binding'

}

// app.component.html (Referred as view)

  <h3>
    Welcome to {{ title }}!
  </h3>

It shown like below:

---

Property Binding: It is used to set values to properties of HTML elements or Directives. It moves value in one direction from components property into target property (DOM element property). We can achieve property binding by using [DOM-property-name]="component-property"

Brackets[] : Cause Angular to evaluate the right-hand side expression.

Ex:

// app.component.ts

export class AppComponent {

imgUrl = './assets/angular.svg'

}

// app.component.html

<img width="50" height="50" alt="Angular Logo" [src]="imgUrl" />

Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value.

as

<img src="./assets/angular.svg">

Both above scenarios shows image like below:

---

Event Binding: It lets you listen for and respond to user actions such as clicks, keystrokes and touches from view to model.

It can be written as (event-name)="template-statement".

  triggerEvent() {
    this.message =
      "User triggered the event by clicking on the button. It calls corresponding template statement (function in model) which displayed this message.";
  }

<button (click)="triggerEvent()">Click Me!</button>
<p>{{message}}</p>

(click) - event name
submit() - template statement

It displays like below:

Two way binding: It is the combination of property and event binding. Two way binding listen for events and updates values simultaneously.

To put simply, data related changes affecting the model are immediately propagated to the matching views and vice versa.

<!--Built-in HTML Element: -->
<input id="count" type="number" [(ngModel)]="count" />

<!--Custom Element: -->
<app-count [(size)]="size"></app-count>
<!--(or)-->
<app-count [size]="size" (sizeChange)="size=$event"></app-count>

For two way binding to work, @Output() property must follow pattern sizeChange if its @Input() property is size.

And the output is like:

Attribute Binding: It helps to set values to attributes directly. With attribute binding, we can improve accessibility, style application dynamically, and manage multiple CSS classes simultaneously.

This resembles property binding in syntax but prefixed with attr as [attr.attribute-name]="expression"

Primary use case of attribute binding is to set ARIA attributes

<button id="submit" [attr.aria-label]="actionName">{{actionName}}</button>

Class or Style binding: It is to add or remove CSS classes from an element's class attribute and to set styles dynamically. This binding also follows property binding syntax.

Class binding syntax is as follows:

 <p [class.red-color]="isSingle">Single Class binding</p>

 <p [class]="'blue-color skyblue-background'">Multi Class string binding</p>

 <p
    [class]="{
      'blue-color': isBlueColor,
      'skyblue-background': isSkyblueBackground
    }">
    Multi Class object binding
 </p>

 <p [class]="['blue-color', 'skyblue-background']">
    Multi Class array binding
 </p>

Style binding syntax is as follows:

 <p [style.color]="'green'">Single Class binding</p>

 <p [style]="'color: green; background-color: yellow'">
    Multi Style string binding
 </p>

 <p [style]="{ color: 'green', border: '1px solid red' }">
    Multi Style object binding
 </p>

Please refer to the following for best understanding of syntax and implementation.

angular-ivy-xvy5j3.stackblitz.io

Please do suggest any useful improvements. I am always happy to update this article.

Reference: https://angular.io/guide/binding-overview

Thanks.

My Twitter: https://twitter.com/urstrulyvishwak

Comments

[Leonardo Montini]

Thanks for the article!

Let me share a little feedback on the code blocks, I think for a better readability you should add the language for highlight, by adding the language tag at the end of the triple backtick.

Snippets will be more colorful and easier to read! :D

<p [class.red-color]="isSingle">Single Class binding</p>

 <p [class]="'blue-color skyblue-background'">Multi Class string binding</p>

 <p
    [class]="{
      'blue-color': isBlueColor,
      'skyblue-background': isSkyblueBackground
    }">
    Multi Class object binding
 </p>

 <p [class]="['blue-color', 'skyblue-background']">
    Multi Class array binding
 </p>

[Kurapati Mahesh]

I forgot to add. Thank you. I will update.