Angular reference not resolving

Question

The following code is not resolving the ${hero.id} to the actual id number:

this.messageService.add("HeroesComponent: Selected hero id=${hero.id}");

The following is being displayed:

"HeroesComponent: Selected hero id=${hero.id}"

What should be displayed is:

"HeroesComponent: Selected hero id=17"

Any help would be appreciated. Thank you

Answer 1

You need backticks `` instead of the normal quotes for template literals.

Change to:

this.messageService.add(`HeroesComponent: Selected hero id=${hero.id}`);