springjava.com
  • Core Java
  • Spring Core
  • Spring Boot
  • Spring MVC
  • Angular Tutorial

Related Posts

  • Property Binding in Angular Interpolation in Angular Angular Component Angular Project Structure Installation & Create Project In Angular Introduction of Angular
Angular Tutorial

Property Binding in Angular

Last Updated: 28-11-2022 Springjava

In this topic, we will learn about Property Binding in Angular.

Table of content:
1. What is a Property Binding in Angular?
2. Examples of Property Binding in Angular
     2.1  Example 1
     2.2  Example 2
     2.3  Example 3
3. Alternate Syntax of Property Binding
     3.1 Alternate Syntax of Property Binding  Example 
4. Interpolation Vs Property Binding in Angular
5. Conclusion

1. What is a Property Binding in Angular?
Property binding in Angular is a one-way-binding technique. In this technique, we can bind a property of a DOM element to the field which is a defined property in our component class.
Syntax:

<element [property]= "component_property">

2. Examples of Property Binding in Angular
    2.1 Example 1:

In this example, we can set the value to the input element by using property binding.
app.component.ts:

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'property-binding-demo';

  public name ='Spring Java';

}

app.component.html: 

<h2>
{{title}}
</h2>
<input type="text" [value]="name">

Output:

property_binding_in_angular

2.2 Example 2:
In this example, we can set the disable to the input element by using property binding.
app.component.ts:

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'property-binding-demo';

  public name ='Spring Java';

  public isDisabled=true;

}

app.component.html:

<h2>
{{title}}
</h2>
<input type="text" [disabled]="isDisabled" [value]="name">

Output:

property_binding_in_angular

2.3 Example 3:
In this example, we can set the enable to the input element by using property binding.
app.component.ts:

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'property-binding-demo';

  public name ='Spring Java';

  public isDisabled=false;

}

app.component.html:

<h2>
{{title}}
</h2>
<input type="text" [disabled]="isDisabled" [value]="name">

Output:

property_binding_in_angular

3. Alternate Syntax of Property Binding:
In this, we can bind-property of the element instead of [property].
Syntax:

<element bind-property= "component_property">

3.1 Alternate Syntax of Property Binding  
Example:
In this example, we can set the enable to the input element by using an alternate syntax of property binding.
app.component.ts:

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'property-binding-demo';

  public name ='Spring Java';

  public isDisabled=false;

}

app.component.html:

<h2>
{{title}}
</h2>
<input type="text" bind-disabled="isDisabled" [value]="name">

Output:

property_binding_in_angular

4. Interpolation Vs Property Binding in Angular:
Interpolation works for String but sometimes we have to bind other than String then we must Property binding. For example, enabling/disabling an HTML element in that time Interpolation is not working because we have to bind the boolean value to the element for enabling/disabling the element.

5. Conclusion:
In this topic, we learned about property binding, syntax and use of property binding, the alternate syntax of property binding and the difference between Interpolation and property binding in Angular.

 

Installation & Create Project In Angular Angular Project Structure Angular Component

Leave your thought here

Your email address will not be published. Required fields are marked *

springjava_com
  • springjavateam@gmail.com
  • springjava.com
Learn
    • Core Java
    • Spring Core
    • Spring Boot
    • Spring MVC
    • Angular Tutorial
Quick links
  • About Us
  • Contact Us
  • Privacy Policy
Subscribe to Blog via Email
Subscribe
© 2021 Spring Java. All Rights Reserved.
springjava.com
  • Core Java
  • Spring Core
  • Spring Boot
  • Spring MVC
  • Angular Tutorial
  • About Us
  • Contact Us