How to use Property Binding in Angular | Angular Tutorial – 4

Angular property binding is a way where you can set the value dynamically to an HTML element’s property based on a variable value from your component.ts file.

Property binding is used with square brackets [] in Angular templates. You can bind to any variable and property of an HTML element.

Here we have mentioned some following examples of how property binding works

Binding to DOM Element Properties

You can bind a img element’s property to a value from your component. For example, binding the src attribute of an <img> element:

<img [src]="imageUrl" alt="logo">

In your typescript file, you would have

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  imageUrl = 'assets/img/logo.png' 
}

Disabled Buttton By Boolean Property Binding

You can use property binding to conditionally disabled a button element like disabled, hidden, etc. For example, disabling a button based on a condition

<button [disabled]="isButtonDisabled">Click Me</button>

Here you needs to create a new property In your typescript file…

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  isButtonDisabled = true;
}

Explore More Visit Angular Official Website – https://angular.io/guide/property-binding

Property binding is a nice feature in Angular as it allows you to create interactive and responsive user interfaces by dynamically updating element properties based on changes in your component’s data. It provides a powerful way to connect your application’s logic with its visual representation.