The first thing a developer learns in Angular is data binding and, specifically, interpolation. You use interpolation as one-way data binding. It embeds expressions in the marked-up texts.

You use interpolation to evaluate a template expression and display the data as shown below,

@Component({
  selector:'app-root',
  template:`
   <p>{{count}}</p>
  `
})
export class AppComponent{
   count: number = 7; 
}

You should get seven printed as the output of the application. By default, Angular uses double curly braces as the syntax of interpolation.

{{expression}}

But, do you know you can override the default curly braces syntax? Yes, Angular allows you to do that by setting the interpolation property of the @Component decorator.

@Component({
  selector:'app-root',
  template:`
   <h1>$count$</h1>
  `,
  interpolation:['$','$']
})
export class AppComponent{
   count: number = 7; 
}

As you see above component, by setting the value of the @Component decorator’s interpolation property, you can change default syntax for the interpolation.

The interpolation property,

• Is a nullable property that means it is optional to set its value
• It takes a string array of size two as the value in that the first element acts as the start of interpolation, and the second element acts as the end of the interpolation.

I hope now you know one hidden trick of the Angular component. I would recommend you explore all properties of the component decorator to work with many such components features, which are not hugely discussed.

Thanks for reading this post and let me leave you with a question,

When to use providers or when to use viewProviders properties of a component.