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.

Angular Property Binding – Interview Questions

Q 1: What is property binding in Angular?

Ans: Property binding binds component properties to DOM element properties using [ ] syntax.

Q 2: How is property binding written?

Ans:

Q 3: How is property binding different from interpolation?

Ans: Property binding works directly with DOM properties, while interpolation works with strings.

Q 4: Is property binding one-way?

Ans: Yes, data flows from component to view.

Q 5: When should property binding be used?

Ans: When binding non-string values or element properties.

Angular Property Binding – Objective Questions (MCQs)