DEV Community

Cover image for Angular: Binding end to end
Kurapati Mahesh
Kurapati Mahesh

Posted on • Updated on

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>

Enter fullscreen mode Exit fullscreen mode

It shown like below:

Image description



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" />

Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

Both above scenarios shows image like below:

Image description


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>

Enter fullscreen mode Exit fullscreen mode

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

It displays like below:

Image description

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>

Enter fullscreen mode Exit fullscreen mode

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

And the output is like:

Image description

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>

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

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

Top comments (2)

Collapse
 
balastrong profile image
Leonardo Montini • Edited

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.

Snippet

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>

Enter fullscreen mode Exit fullscreen mode
Collapse
 
urstrulyvishwak profile image
Kurapati Mahesh

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