Angular Data Binding 101

Data binding is a core concept in Angular and allows to define communication between a component and the view, making it very easy to define interactive applications without worrying about pushing and pulling data. There are four forms of data binding and they differ in the way the data is flowing.

This post is primarily focused on what data binding is and the types of data binding available.

1. String Interpolation
2. Property Binding
3. Event Binding
4. Two-Way Data Binding

String Interpolation

The type of one-way data binding where text is between a set of curly braces often uses the name of a component property. Angular replaces that name with the string value of the corresponding component property every time it updates.
The syntax of string interpolation is to use double curly braces :

@Component({
    selector: 'app-some',
    template: `<p>{{ content }}</p>`
})
export class SomeComponent {
    content = "Hello!"
}

Property Binding

This is similar to String interpolation but especially used to set properties of HTML/Custom components. The value flows from a component’s property into the target elements property. Therefore, Property binding can’t be used to read or pull data from the target elements. You can achieve property binding using square brackets around the tag and any valid Typescript code in the quotes (variable name, function call, anything).

@Component({
    selector: 'app-some',
    template: `
        <p>{{ content }}</p>
        <button [disabled]="getButtonState()">Disabled</button>    
    `
})
export class SomeComponent {
    content = "Hello!"
    getButtonState(): boolean {
        return true;
    }
}

Event Binding

Event binding is reverse of the above two. It sends data from the component or HTML element. Event binding is defined as the updating/sending of the value/information of a certain variable from the presentation layer (view) to the component (model).

@Component({
    selector: 'app-some',
    template: `
        <p>{{ content }}</p>
        <button (click)="onClick()">Disabled</button>    
    `
})
export class SomeComponent {
    content = "Hello!"
    onClick(): void {
        console.log("Button was clicked!");
    }
}

Notice the difference between property binding and event binding. Property binding uses square brackets where as event binding uses round brackets.

Two way data binding

Two-way binding is the merger of property and event binding. Two-way data binding will perform two things i.e. setting of the element property and listening to the element change events, Angular uses the combination of Property binding and event binding to implement two-way data binding so the syntax for the name is:

[(ngModel)]=”property name”

Two way data binding let’s us keep the code short and data in sync across both the parent and child components.