property binding in Angular 5

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.

<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 

<app-test></app-test>

That's all , verify the code by refreshing the localhost:4200 in chrome browser . You will see the output as

---