Property binding in angular 8
Property Binding is a one-way data-binding technique. In property binding, we bind a property of a DOM element to a field which is a defined property in our component TypeScript code. Actually, Angular internally converts string interpolation into property binding.
In this, we bind the property of a defined element to an HTML DOM element.
Syntax:
<element [property]= 'typescript_property'>
Approach:
- Define a property element in the app.component.ts file.
- In the app.component.html file, set the property of the HTML element by assigning the property value to the app.component.ts file’s element.
Example 1: setting value of an input element using property binding.
app.component.html
<input style = "color:green; margin-top: 40px; margin-left: 100px;" [value]='title'> |
app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'GeeksforGeeks'; } |
Output:
Example 2: getting source of the image using property binding.
app.component.html
<img [src]='src'> |
app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { } |
Output:
Example 3: disabling a button using property binding.
app.component.html
<button [disabled]='bool' style="margin-top: 20px;">GeekyButton</button> |
app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { bool = 'true'; } |
Output:
Please Login to comment...