Angular - Property Binding

Property Binding in angular that allows you dynamically set the values for properties of HTML elements or directives. Use property binding to do things such as toggle button features, set paths programmatically, and share values between components.

Syntax:

Property binding is written inside square brackets [].

<element [property]="expression"></element>

Here, property is the HTML element property you want to bind, and expression is the value from the component that will be assigned to the property.

Example 1:

Binding to the disabled Property.

  
			app/src/app.component.ts 
		

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

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

   
			app/src/app.component.html 
		
		<button [disabled]="isButtonDisabled">Click Me</button>

Run the Angular Application use the command is given below

ng serve

Copy the URL: http://localhost:4200/ and run in your browser

Output

You will see a button that is disabled (not clickable).

Example 2:

Binding to the src Property of an Image

  
			app/src/app.component.ts
		

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  imageUrl = 'https://angular.io/assets/images/logos/angular/angular.png';
}
		

app/src/app.component.html

<img [src]="imageUrl" alt="Angular Logo" width="100">

Output

You'll see the Angular logo image rendered with a width of 100px.

Example 3:

Binding to the href Property

  
			app/src/app.component.ts
		

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  website = 'https://angular.io';
}
		

app/src/app.component.html

<a [href]="website" target="_blank">Click to visit Angular</a>

Output

You'll see a link that says “Click to visit Angular”. Clicking it opens the Angular website in a new tab.

Example 4:

Binding to a CSS Class

  
			app/src/app.component.ts
		

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
    .active {
      color: blue;
      font-weight: bold;
    }
  `]
})
export class AppComponent {
  isActive = true;
}
		

app/src/app.component.html

<p [class.active]="isActive">This is an active paragraph.</p>

Output

The text “This is an active paragraph.” appears in blue and bold.

Example 5:

Binding to Inline Style

  
			app/src/app.component.ts
		

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  color = 'blue';
}
		

app/src/app.component.html

<p [style.color]="color">This text is styled dynamically!</p>

Output

You'll see the text “This text is styled dynamically!” in blue color.

Prev Next