0

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

2 Answers 2

0

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.

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.