Angular Property Binding

The Property binding is used to bind HTML element property in the component html file like src, style, class, disabled etc using property binding.
Property binding enclose with square bracket []

There are some steps to define the Property Binding.

Step1) Firstly create a component property-binding


ng g c property-binding

Output will be


CREATE src/app/property-binding/property-binding.component.html (31 bytes)
CREATE src/app/property-binding/property-binding.component.spec.ts (690 bytes)
CREATE src/app/property-binding/property-binding.component.ts (315 bytes)
CREATE src/app/property-binding/property-binding.component.scss (0 bytes)
UPDATE src/app/app.module.ts (1371 bytes)

Step2) Now, open the property-binding.component.ts file and create the two variables title which is string datatype and second variable is isEnabled which is boolean datatype.


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

@Component({
  selector: 'app-property-binding',
  templateUrl: './property-binding.component.html',
  styleUrls: ['./property-binding.component.scss']
})
export class PropertyBindingComponent implements OnInit {

  title:string;
  isEnabled: boolean;
  constructor() {
    this.title= 'Property Binding Example';
    this.isEnabled = false;
   }

  ngOnInit(): void {
  }

}

Step3):- Now, open the property-binding.component.html file and add the property binding through innerText and disabled property.


<div align="center">
    <h2 [innerText]="title"></h2>
    <button class="btn btn-primary" [disabled]="!isEnabled">Details</button>
  </div>

Step4) create the route in app-routing-module.ts file
Firstly import PropertyBindingComponent


import { PropertyBindingComponent } from './property-binding/property-binding.component';

Now, create the route into the routes array.


const routes: Routes = [
  {path:'property-binding', component:PropertyBindingComponent}
];

Step5) Now open the URL on the browser


http://localhost:4200/property-binding

Step6) Now, you can see innerText and disabled property binds through property binding.