What is the difference between HTML attribute and DOM property in Angular?

Diff between html attribute and DOM by Sagar Jaybhay

Attributes are defined by Html, whereas properties are defined by the DOM. Attribute initialize DOM properties, once the initialization complete the attribute job is done. Property value can change, whereas attribute value can’t.

Angular recommends property binding instead of attribute binding. Attribute binding only used when you don’t have a corresponding property for that attribute.

If you want to bind a value to attribute by angular use below syntax attr.propertyName

Sagar Jaybhay- Angular Attribute Binding
Dom Binding

What is Attribute Binding?

  • Interpolation and Property binding deal with binding component class properties to HTML element properties and NOT attributes.
  • But not all HTML element attributes have corresponding properties. For ex, colspan attribute does not have a corresponding property.
  • In situations like this, we want to be able to bind to HTML element attributes.
  • Hence angular provides attributes binding.

Css Class Binding:

<button class="redClass" [class]="buttonCssClass">Hello Brother</button>

When we use attribute binding it remove existing css class binding.

css and Class Binding In Angular

Style Binding:

style Binding

Event Binding:

<button class="redClass" [style.font-size.px]="ftSize" (click)="clickBtn()" [ngClass]="addclassess()">ngClass</button>

Canonical Form

<button class="redClass" [style.font-size.px]="ftSize" on-click="clickBtn1()">canical form</button>

Data Binding:

<input
  type="text"
  [value]="textName" //one way property binding
  (input)="textName = $event.target.value"  //event value binding
/>

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *