Hello awesome people👋, welcome back!

This is again a super simple post about Angular, but pretty informative and you might have not read about it so far.

Let's begin.

What is Text Interpolation?

Interpolation refers to embedding expressions or just variables into marked-up text in the Angular app.

By default, interpolation uses the double curly braces {{ and }} as delimiters.

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Hello World';
}

app.component.html

<!-- Hello World! -->
<span>{{ title }}!</span>

Let's change the default delimiters to Starstruck emoji 🤩

Angular allows to change the default delimiters {{ and }} to custom symbols/emojis.

All you need to do is add the interpolation option to @Component decorator in your App HTML (app.component.html) with custom start and end delimiters.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  interpolation: ['🤩', '🤩'],
})
export class AppComponent {
  title = 'Hello World';
}

  <!-- Hello World! -->
  <span>🤩 title 🤩!</span>

Demo

Check out the demo on StackBlitz

All ready you now know how to change the default delimiters for text interpolation.

Hope you find this article useful, please feel free to share it with your friends/colleagues.

If you got any questions, don't hesitate to post them in the comments section down below.

Happy learning!

I tweet a lot about Web development, Java, and Productivity Hacks, follow me on Twitter at AskUdhay.

Here is one of my recent tweets:

Reference

angular.io/api/core/Component#interpolation