Angular Property Binding

Angular Property Binding

The property binding is also the one-way data binding that allows us to set the properties for the HTML element. Whenever the property value updates in the component that same property value also changes to the HTML element in the view. We can set any kind of HTML properties like class, href, src, etc.

The property binding Angular syntax.

[html-binding-property]=”binding-source-code”

Let's see the example code of property binding. In this example, the button will be active for 2 seconds after loading the page in the browser. Note: we have seen the setTimeout JavaScript function and set the time 2000 which means 2 seconds. And that function is defined inside of construction which doesn't need to call.

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

//Define a template within the component withing backticks
@Component({
    selector: 'app-demoComponent',
    template:  `
            <button class="btn btn-primary" [disabled]="DynamicButton">Dynamic Button</button>
        `
    })

export class DemoComponent {
    DynamicButton = true;

    constructor(){
        setTimeout(() => {
            this.DynamicButton = false;
        }, 2000);
    }
}