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!

Günter Zöchbauer · Accepted Answer · 2017-01-26 09:53:24Z

31

{{}} 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.

answered Jan 26, 2017 at 9:53

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

AMarquez94 Over a year ago

Thanks! It worked like a charm. I guess it will also work if I get the object "question" from DB calling an API directly if the "title" field is Hello ${this.name}..., won't it?

Günter Zöchbauer Over a year ago

Sorry, I don't know what that means exactly. It depends on where you put your code and if this.name is available from where the code is executed, but in principle this works everywhere in TS code.

AMarquez94 Over a year ago

Ok, don't worry, will try to try it myself and see if it works in my particular case. Thank you very much again!

Ryan Coolwebs Over a year ago

Thanks for this solution, Initially was not working for me but that was because I was using single quotes and not backticks!

G.Ashok Kumar · Accepted Answer · 2017-06-19 13:24:14Z

0

In angular2 you have to use this keyword

For example, ${this.name}

edited Jun 19, 2017 at 13:24

answered Jun 19, 2017 at 13:19

G.Ashok Kumar

1,6332 gold badges15 silver badges25 bronze badges

Collectives™ on Stack Overflow

Angular 2 - Display variable inside a variable in a template

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related