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:

https://twitter.com/AskUdhay/status/1414568618436685830

Reference

https://angular.io/api/core/Component#interpolation

How to change default interpolation delimiter '{{' and '}}' to awesome emojis🤩 in Angular?

Comments (1)

More from this blog

How to set up Tailwind CSS in an Angular project?

How to create a Simple Card Component using TailWindCSS

How to use lite-server as a dev server?

Create documentation of Angular project under 30 seconds

What is Text Interpolation?

app.component.ts

app.component.html

Let's change the default delimiters to Starstruck emoji 🤩

Demo

Reference

Command Palette

Comments (1)

More from this blog

What is Text Interpolation?

app.component.ts

app.component.html

Let's change the default delimiters to Starstruck emoji 🤩

Demo

Reference