I'm in the process of creating a game where players need to fill in blanks within dynamically generated statements. To achieve this, I require string interpolation to capture user input and dynamic innerHTML as the blanks can be positioned anywhere within the statement.
For clarity, here are some relevant code snippets:
app.component.html
<input type="range" step="1" min="0" max="100" class="slider
(input)="sliderMoved($event)">
<div class="question" [innerHTML]="questionStatement"></div>
app.component.ts
display=50;
questionStatement='<div class="percent">{{display}}%</div>
of Americans have a university degree.'
questionStatementExample2='Canada is <div class="percent">{{display}}%</div>
the size of America.'
sliderMoved(event: any) {this.display=event.target.value;}
The questionStatement may contain
<div class="percent">{{display}}%</div>Unfortunately, using string interpolation ({{display}}) within innerHTML does not yield the desired results. Instead, it displays {{display}} literally on the screen. What approach should I take in this scenario?