Angular Services

Property binding

We saw the easiest form of property binding through interpolation before. But it is better to use interpolation if you want to show a message between HTML tags. In order to edit the properties of a DOM element, we use different syntax as follows:

[property]="expression" 

For example, in the following DOM element:

  <input type="email" [placeholder]="emailPlaceHolder" > 

The square brackets indicate that we are binding the <input> placeholder property to the emailPlaceHolder property defined somewhere in a component class:

// some component class 
export class EmailComponent { 
  emailPlaceHolder = "please enter your email"; 
} 

We can apply similar syntax to bind to a CSS class or even a CSS style.