Components and Data Binding: Part – 2

Angular Data Binding
Reading Time: 4 minutes

As we have discussed about basics of Angular in the previous blog. Now we have an idea about what are components and what is data binding. So, we can conclude that components are the key features in Angular. And, data binding is the communication between the typescript code and the HTML code of a component. 

At the beginning of any angular project, Command Line Interface provides a built-in component which is the app component. We can write the whole logic in the app component and it will work fine. But, we should split the code into different components as the logic should not be present in one place. Also, while making bigger apps we can reuse parts of the components we generate.

image of app component in the beginning of angular project

From the above image, we can see that the app component is the only component present at the beginning of any angular project. And we can add other components according to our needs.

HTML Attribute v/s DOM Property

Before studying binding, we need to understand the difference between an HTML attribute and DOM property.

  • HTML is a set of written instructions for how to display a web page.
  • The browser reads the HTML and creates something called a Document Object Model.
  • Changing the HTML doesn’t automatically update the web page unless the user refreshes the browser, changing the DOM however instantly updates the web page.
  • It is important to remember that the HTML attribute and the DOM property are different things, even when they have the same name. Angular doesn’t manipulate HTML attributes, it manipulates DOM properties because the DOM is what actually gets displayed.

Data Binding in Components

So, we can define data binding as the communication between the typescript code and the template of the component. We use data binding to change or output some data which is dynamic and not hard-coded in the template. There are several kinds of data binding. So, we will look forward to them –

1. String Interpolation

It is a tool for outputting data in a template. Instead of hard-coding the output of the template, we can use string interpolation. We can do that in the template by using the special {{ }} syntax. The {{ }} contains Typescript code that Angular runs and we can insert the output in the HTML.

We cannot write any multi-line expression or block expressions in string interpolation. Also, we cannot use any if-else structure but we can use a ternary expression.

In string interpolation, we have to get a string in the end or something we can convert into a string. So, if we put {{ 2 + 2 }} in the template the number 4 would insert into the HTML.

Example for string interpolation:-

home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      {{title}}
    </ion-title>
  </ion-toolbar>
</ion-header>

home.page.ts

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
    title = 'Welcome to Home Page';

    constructor() {
    }

    ngOnInit() {
    }
}

2. Property Binding

A basic difference between string interpolation and property binding is –

  • If we want to output something in our template, print some text to it then we use string interpolation.
  • If we want to change some property, then we use property binding.
<p [hidden]="true">{{data}}</p>

The target inside [] is the name of the property. In the example above the target is the hidden DOM property. The text to the right-hand side of = is Typescript code that gets executed and the resulting value is assigned to the target.

3. Event Binding

When we want to set a property while an event occurs, we use event binding. We can do that in a template using ()these parentheses. Parentheses are signal that we are using event binding and we have to specify the name of the event between parentheses like –

<a class="btn btn-primary"
   (click)="data.hide = !data.hide">Click Me
</a>

In the above example, the target inside the () is an event we want to listen for, we are listening for the click event. The text to the right-hand side of = is the code we want to execute once this event occurs. Often times it is a method like –

<a class="btn btn-primary"
   (click)="toggle(data)">Click Me
</a>

4. Two-way Binding

Two-way binding gives our app a way to share data between a component class and its template.

In the above image, we combine event and property binding. In two way binding, we not only combine event and property binding but also combine their syntax.

home.page.ts

import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
    fullName:string = 'Welcome to Home Page';

    constructor() {
    }

    ngOnInit() {
    }
}

home.page.html

<h2>Two-way binding example<h2>
   <input [(ngModel)]="fullName" />
<p>{{fullName}}</p>

In the above example, we can see that changing the text box value updates property value in the component. So, the target inside [()]is a special directive ngModel. We can set this to equal some property defined in our Typescript code. [(ngModel)] will trigger the input event. Then, update the value of our property defined in our component.

Other than these data bindings, there are some more binding like –

Attribute Binding

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

Class Binding

<div class="foo bar">Some text</div>

Style Binding

<div style="color: green">Some text</div>

So, that was all about the components and data binding.

For more details on components and data binding, visit the Angular Docs.

Thanks!

Footer

Leave a Reply