Tuesday, November 9, 2021

Property Binding Angular-10

 Property Vs Attributes


Attributes and properties are not the  same

Attributes are defined by HTML

Properties are defined by DOM 

Attributes initialize DOM properties and then they are done

Attributes values con't change one they are initialized

Property values however can change




<input type="text" value="Angular Bin" >

<input type="text" [id]="userID" value="Angular Bin" >

<input type="text" disabled="false" id={{userID}} value="Angular Bin" > (Not work disabled)

<input type="text" [disabled]="false" id={{userID}} value="Angular Bin" > (It will work disabled)

<input type="text" [disabled]="isDisabled" id={{userID}} value="Angular Bin" > (It will work disabled)

<input type="text" bind-disabled="isDisabled" id={{userID}} value="Angular Bin" > (It will work disabled)






component.ts


public userID = "Angular 8"

public isDisabled = true;



Interpolation in Angular-10

 

Interpolation 

By using {{ }} we can use the property value only

String interpolation is One Way Data Binding

Which is used to output the data from typescript code

Simply, interpolation  is way of binding data from class to template




<p>Welcome to {{title}}</p>

<p>{{"Welcome to :" + title}}</p>

<p>{{title.length}}</p>

<p>{{title.toUpperCase()}}</p>

<p>{{userName()}}</p>

<p>{{myUrl}}</p>




component.ts file


public title = "Angular Bin";

public myUrl = window.location.href;


userName(){

   return "Welcome : " + this.title;

}