Angular custom template interpolation breaks with curly braces

Question

I'm new with Angular and I can not find and answer to my question.

I want to change the Angular interpolation to make it compatible with Smarty templates, so I changed the default ['{{','}}'] to ['[[',']]'], or ['[',']'] but if template contains something that starts with { I have to scape it with new interpolation.

I created a new app

ng new new-app

Then I edit the app.component.ts decorator as:

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

Then I added on app.component.html the new var with the new interpolation

<h1>[*title*][[title]]{{title}}</h1>

I Expected

<h1>[*title*]Hello World!{{title}}</h1>

But I get an Angular error

Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("<h1>[*title*]Hello World!{{title}}</h1>

To fix this I need to update the template with

<h1>[*title*]Hello World![["{{"]]title}}</h1>

Why I have to escape the "{{" if the new Interpolation are "[[" "]]"?