Angular - Binding & it's Types

---

---

Binding is the process of connecting a target in the template to a template expression or template statement created from model of the component to which the template belongs. When the model of the component changes, then output of the template expression changes and it updates the template output (view) as well.

Type of Binding

Text interpolation is the simplest form of binding and angular provides many types of binding for different scenarios. The type of binding are as follows −

• Text interpolation
• Attribute binding
• Class binding
• Style binding
• Property binding
• Event binding
• Two way data binding

Text interpolation

Text interpolation is the process of connecting model of a components instance to the text portion of components template.

Let us consider a property, name available in the component.

name: string = "John"

Then, the name can be used in the template using text interpolation as shown below −

Name: {{ name }}

The final output of the template is shown below −

Name: John

Let us learn text interpolation in details in the upcoming chapter.

Attribute binding

Attribute binding is the process of connecting model of a components instance to the attribute of a (target) HTML element in the components template

Let us consider a property, name available in the component.

name: string = "John"

Attribute binding can be written as shown below −

<input type="text" name="username" [attr.value]="name" />

The output of the template is shown below −

<input type="text" name="username" value="John" />

Let us learn attribute in details in the upcomming chapter.

Style binding

Style binding is the process of connecting model of a components instance to the style attributes of a (target) HTML element in the components template

Let us consider a property, myStyle available in the component.

myStyle: string = "background-color: blue"

Class binding can be written as shown below −

<button [style]="myStyle">Click here</button>

The output of the template is shown below −

<button style="background-color: blue">Click here</button>

Let us learn style binding in details in the upcomming chapter.

Class binding

Class binding is the process of connecting model of a components instance to the class attributes of a (target) HTML element in the components template

Let us consider a property, myClass available in the component.

myClass: string = "fancy-button"

Class binding can be written as shown below −

<button [class]="myClass">Click here</button>

The output of the template is shown below −

<button class="fancy-button">Click here</button>

Let us learn class binding concept in details in the upcoming chapter.

Property binding

Property binding is the process of connecting model of a components instance to the property of a (target) HTML element / other component in the components template. Angular exposes the attributes of HTML element as properties with attribute names converted to CamelCase. This will help to connect all attributes of the HTML element through property binding.

Let us consider a property, name available in the component.

name: string = "John"

Property binding can be written as shown below −

<input type="text" name="username" [value]="name" />

The output of the template is shown below −

<input type="text" name="username" value="John" />

Let us learn property binding concept in details in the upcoming chapter.

Event binding

Event binding is the process of setting an action (template statements / components method) to the event of a (target) HTML element / (another) component.

Let us consider a method, myAction available in the component.

myAction() {
   // do some process
}

Event binding can be written as shown below −

<button type="submit" (submit)="myAction">Click here</button>

Once the submit event is fired, myAction() method will be called and executed.

Let us learn event binding concept in details in the upcoming chapter.

Two way data binding

Two way data binding is a combination of property and event binding to sync data between parent and child component.

A sample two-way data binding format is as follows −

// `parent-comp` template
<child-comp [(data)]="dataChange()" />

Here, data will be passed initially from parent to child component and then, whenever the data gets updated in the child component, the child component will fire an event with updated data and the parent will capture the data through event callback method, dataChange().

Let us learn two-way data binding concept in details in the upcoming chapter.

Conclusion

Binding provides multiple options to connect a component to its template. This enables the developer to create rich frontend application easily. Binding reduces the complexity of frontend logic and enable developer to concentrate on developing more feature in a short period of time.