Property binding in angular 12

Property binding in angular 12

Angular12 14-07-2021 Saheb Sutradhar

In this post we are going to learn property binding  in angular . Before learning property binding in angular we should know the difference between HTML Attribute and DOM property

Attribute and properties are not same .

Attribute:

  • Attribute defined by HTML.
  • Attribute initialized DOM property and they are done . Attribute value can not change once they are initialized .

Property:

  • Property defined by DOM (Document Object Model).
  • Property value can change

 

Example

Here in below example the input tag the initial value of the input element is value="initialValue"  , when the HTML is loaded in the browser and the DOM is prepared then DOM initialized a value property for the input element.

Now when we are changing the value in the input filed from initialValue to codelearningpoint now the DOM property value is getting updated and the input value attribute still having the same value.

that is why in the below example after changing the value in input filed ,  in the chrome console when we are printing the attribute document.querySelector('input').getAttribute('value'); it's printing the initialValue and when we are printing value property document.querySelector('input').value; it's printing the updated value which is codelearningpoint .

Example

<input type="text" value="initialValue">

property

 

So in angular property binding we are binding the HTML attributes but in actual we are binding DOM property.

src/app/app.component.html

<button [id]="btnId">Test</button>

src/app/app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  btnId= "testBtn"
}

 

In above example the button element is having id property and we are setting value to the id property dynamically by using property binding.

One questing can comes to your mind , can we use angular interpolation instead of using property binding ?

The answer is yes we can use but there are some limitation in angular interpolation. 

Example

Interpolation only works with string value , Suppose in a button and you want to disable and enable the button based on some condition. To disable a button we have disabled property  and we can not set string value to the disabled property, it only works with boolean.

In such case we need to use property binding.

src/app/app.component.html

<button [id]="btnId" disabled='isDisabled'>Test</button> 

src/app/app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  btnId= "testBtn"
  isDisabled=true;
}

So if you are binding any property then it's better to use property binding instead of of using interpolation.

 

I hope this article is helpful for you , i am very glad to help you thanks for reading

 

 

Related Posts

Card image cap

Angular Material Datepicker Example

Angular12 14-07-2021 Saheb Sutradhar

In this angular material datepicker post i will show you how to use Datepicker in angular app using angular material. ...

Card image cap

Angular Material Sidenav Example

Angular12 14-07-2021 Saheb Sutradhar

In this post you will learn how to implement angular material sidenav , in most of the realtime projects we use sidenav for the application navigation , even in ...

Card image cap

Class binding in angular 12

Angular12 15-07-2021 Saheb Sutradhar

In this post we are going to see how we can bind class in angular . Class binding  in angular is very important when you work in a real time project. I have ex ...

Card image cap

Event Binding in Angular 12

Angular12 16-07-2021 Saheb Sutradhar

In this post we are going to learn what is event binding in angular, event binding is most important thing without event binding we can not build an angular app ...

Card image cap

Pipes in Angular 12

Angular12 16-07-2021 Saheb Sutradhar

In angular we use pipes to formate the data, thre are few built in pipes in angular. ...

Card image cap

Custom Pipe In Angular

Angular12 17-07-2021 Saheb Sutradhar

In this post you will learn how to create custom pipe in angular. When you need some data formatting which can not be done by using angular built-in pipes then ...