Angular 2 - Display variable inside a variable in a template

Question

I'm quite new in Angular 2, and I want to show in my template a string in a variable that has to contain inside another variable. I will show you a simplified example of what my problem is and what I want to achieve:

---

questionnaire.component.ts

/* Starts being "", populating an input text will modify this */
name = "Albert";

/* This variable comes from calling an API, here I just put it as created to simplify */
question.title = "Hello {{name}}, how old are you?";

questionnaire.template.html

<p>{{question.title}}</p>

---

The result I'm getting is:

Hello {{name}}, how old are you?

and my desired result would be:

Hello Albert, how old are you?

I have tried to escape the "{{ }}" in the string stored on my DB, used the ASCII character instead of the curly braces, put it inside [innerHTML]... but the result was always the same.

Do you know how can I solve this?

Thank you very much!

Answer 1

{{}} only works in Angular component templates and not in arbitrary strings and also not in HTML added dynamically to the DOM.

Just change it to

 question.title = `Hello ${this.name}, how old are you?`;

to use TypeScript string interpolation.