Angular: Binding end to end
Tags: javascript, webdev, beginners, angular
Published: 2022-08-09 07:11:00

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tllhrnicoa7sbf8jsnld.png)


<hr>
**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 

```html
<img src="./assets/angular.svg">
```
Both above scenarios shows image like below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ol5nuklf6dd7to6farzv.png)

<hr>

**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".

```html
  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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7y4qv3574zon8t58vmrf.png)


**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.

```html
<!--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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1mvjhqp60383tl0kjqm.gif)

**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

```html
<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:

```html
 <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:

```html
 <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. 

{% embed https://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