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

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](https://stackblitz.com/github/askudhay/custom-text-interpolation-delimiters) 

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](https://twitter.com/AskUdhay).

Here is one of my recent tweets:

%[https://twitter.com/AskUdhay/status/1414568618436685830]

## Reference

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