Hi Guys,
Let's understand what is property binding in angular 5.
We all know that an HTML element has various properties like id , name , value, etc. . Angular provides a way to bind to the property of HTML elements , called property binding .
There are multiple use cases that can be simplified using property binding like , if you have to change the value of a text field dynamically , or enable/disable a button. Let's see how can we do it.
First create an html file which will act as a component . Name this file as test.component.html , in this file have a text field . To bind a property we need to put the property in []. Here we are going to bind the value property , so I have placed value in square brackets . Since I am going to bind this property to a dynamic value , I will do so by assigning the property to a variable myValue.
You need to define myValue in the component file . So , create a typescript file and name it as test.component.ts . The content of the file should be as below.
Let's understand what is property binding in angular 5.
We all know that an HTML element has various properties like id , name , value, etc. . Angular provides a way to bind to the property of HTML elements , called property binding .
There are multiple use cases that can be simplified using property binding like , if you have to change the value of a text field dynamically , or enable/disable a button. Let's see how can we do it.
First create an html file which will act as a component . Name this file as test.component.html , in this file have a text field . To bind a property we need to put the property in []. Here we are going to bind the value property , so I have placed value in square brackets . Since I am going to bind this property to a dynamic value , I will do so by assigning the property to a variable myValue.
<input type="text" [value]="myValue">
You need to define myValue in the component file . So , create a typescript file and name it as test.component.ts . The content of the file should be as below.
import { Component } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html'
})
export class TestComponent {
myValue="test";
}
Finally update your index.html as
@Component({
selector: 'app-test',
templateUrl: './test.component.html'
})
export class TestComponent {
myValue="test";
}
<app-test></app-test>
That's all , verify the code by refreshing the localhost:4200 in chrome browser . You will see the output as
