Property Binding in Angular
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:
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:
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:
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:
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.
Leave your thought here
Your email address will not be published. Required fields are marked *