Showing next element in array on button click within a modal - html

Question

Im trying to show a new question from a quiz within a modal when the next button is clicked. I havent used angular 2 before and so im sure im missing a few trivial parts. i know that questions are accessible from the html as i have displayed them in other ways but i cant get them to show in a modal one by one.
html:
<div id="modal" class="modal modal-fixed-footer" materialize="modal" [materializeActions]="actions">
<div class="modal-content">
<div *ngIf="let question of questions[pager.index];">
<div class="badge badge-info">Question {{pager.index + 1}} of {{questions.length}}.</div>
<p>{{pager.index + 1}}. <span [innerHTML]="question.text"></span></p>
<div class="row text-left answers">
<div class="col-md-6" *ngFor="let answer of question.answers">
<div class="answer">
<label class="">
<input type="checkbox" (change)="onSelect(answer.text);"/>
{{answer.text}}
</label>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" (click)="goTo(pager.index + 1);">Next</button>
</div>
</div>
Any help would be great. Thanks

Answer 1

You are using *ngIf in wrong way, you can add question field to your Component and fill it with questions[pager.index] in goTo(index) function.

Answer 2

This looks a little different to my original code but this is how i achieved it in the
<div *ngIf="pager.index < questions.length">
<h5 class="flow-text"><span [innerHTML]="questions[pager.index].text"></span></h5>
<br>
<div class="row text-left">
<div class="col s12 m12" *ngFor="let answer of questions[pager.index].answers">
<div class="answer">
<input type="checkbox" [(ngModel)]="answer.selected" (change)="onSelect(answer)"/><label class="black-text flow-text"> {{answer.text}} </label>
</div>
</div>
</div>
<footer class="row">
<div class="col s6 m6"></div>
<div class="col s6 m6">
<div *ngIf="pager.index < questions.length - 1">
<button id="nextButton" class="btn-flat black-text right flow-text" (click)="goTo(pager.index + 1);">Next</button>
</div>
<div *ngIf="pager.index == questions.length - 1">
<button id="nextButton" class="btn-flat black-text right flow-text" (click)="goTo(pager.index + 1);">Finish</button>
</div>
</div>
</footer>
</div>