Angular, button requires 2 clicks to change text

Question

I'm a beginner to angular and this a quiz application in which I'm stuck in a problem where clicking button requires 2 clicks. At first click, it works fine but when I click on any button, then next and back buttons would require double clicking to go back or next to the next question.

html:

<div class="qblock" *ngIf="search">
      <div class="qheader">
        <h2>{{ search.questionNumber }}</h2>
      </div>
      <div class="qdescription">
        <p>
          {{ search.questionText }}
        </p>
      </div>
    </div>

    <div class="qactions text-right">
      <button class="btn btn-secondary" (click)="previous(search.index)">
        Back
      </button>
      <button class="btn btn-primary" (click)="next(search.index)">
        Next
      </button>
    </div>

component.ts

public QuizData: any = {};
public number = 0;
  public search: any;
  constructor(private cd: ChangeDetectorRef) {
    this.QuizData = [
      {
        index: 0,
        questionNumber: 'Question 1',
        questionText:
          'Test question 1',
        options: [
          {
            optionLabel: 'A',
            optionText: 'Option A',
            optionActive: false,
          },
          {
            optionLabel: 'B',
            optionText: 'Option B',
            optionActive: false,
          },
          {
            optionLabel: 'C',
            optionText: 'Option C',
            optionActive: false,
          },
          {
            optionLabel: 'D',
            optionText: 'Option D',
            optionActive: false,
          },
        ],
      },
      {
        index: 2,
        questionNumber: 'Question 2',
        questionText:
          'Test question 2',
        options: [
          {
            optionLabel: 'A',
            optionText: 'Option A',
            optionActive: false,
          },
          {
            optionLabel: 'B',
            optionText: 'Option B',
            optionActive: false,
          },
          {
            optionLabel: 'C',
            optionText: 'Option C',
            optionActive: false,
          },
          {
            optionLabel: 'D',
            optionText: 'Option D',
            optionActive: false,
          },
        ],
      },
    ];
    this.number = 0;
    let currentQuestion = this.QuizData[this.number];
    this.number = this.number + 1;
    this.search = currentQuestion;
  }

next(index) {
    let count = Object.keys(this.QuizData).length;
    index = index + 1;
     if (this.number == count) {
       alert('you reached last index');
       this.number = this.number - 1;
       return;
     }
    let nextQuestion = this.QuizData[this.number];
    if (this.number < count) {
      this.number = this.number + 1;
    }
    this.search = nextQuestion;
  }
  previous(index) {
    index = index - 1;
    this.number = this.number - 1;
    if (this.number < 0) {
      this.number = 0;
      return;
    }
    let previousQuestion = this.QuizData[this.number];
    this.search = previousQuestion;
  }

Answer 1

Demo

remove this.number = this.number + 1; from constructor . Your first index is 0;

then update your events like below

 next(index) {
    let count = Object.keys(this.QuizData).length;
    this.number++;
     if (this.number == count) {
       alert('you reached last index'); 
       this.number --;
       return;
     }
    let nextQuestion = this.QuizData[this.number];
    this.search = nextQuestion;
  }
  previous(index) {
    this.number --;
    if (this.number < 0) {
      this.number = 0;
      return;
    }
    let previousQuestion = this.QuizData[this.number];
    this.search = previousQuestion;
  }