Using String Interpolation In InnerHTML In Angular

I am designing a game, and I am dynamically creating statements with blanks inside and ask the players to fill in the blanks. I need string interpolation to record user's input, bu

Solution 1:

Template literals should help you out here. If you modify your component like below your problem should be solved.

app.component.ts

display = 50;

questionStatement = `<div class="percent">${this.display}%</div> of Americans have a university degree.`

sliderMoved(event: any) {
    this.display=event.target.value;
    this.questionStatement = `<div class="percent">${this.display}%</div> of Americans have a university degree.`
}