angular дважды нажмите стрелять, используя nativeElement.click?

Question

Вызов getNextQuestion, который используется, пока у меня не будет data.length в форме, поэтому на последнем элементе я показываю save кнопку, которая вызывает saveChanges() и которая запускается дважды из-за this.closeBtn.nativeElement.click();, как я могу решить эту проблему выпускать и закрывать bootstrap модально?

main.component. html

<form [formGroup]="questionForm" novalidate>
            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="button" *ngIf="showNextButton" [disabled]="!questionsOptionSelected" (change) ="handleChange(singleQuestion)" class="btn btn-primary" (click)="getNextQuestion(singleQuestion)">Next Question</button>
                                <button type="button" *ngIf="showSaveButton" class="btn btn-primary" data-dismiss="modal" #closeBtn [disabled]="!questionsOptionSelected"  (click)="saveChanges(singleQuestion)">Save changes</button>
                              </div>               
 </form>

main.component.ts

import { Component, ViewChild, ElementRef} from '@angular/core';
import { ApiService } from './api.service';
import { EventService} from './format-questions/format-questions.service'
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  questionForm: FormGroup;
  @ViewChild('closeBtn', {static: false}) closeBtn: ElementRef;
  data: any;
  questions: any[] = [];
  singleQuestion: any[] = [];

  constructor(private dataService:ApiService, private eventService:EventService, private formBuilder: FormBuilder) {
    this.questionForm = this.formBuilder.group({
      alrgyDetls: formBuilder.group({
        ALLERGY_DETAILS: ['']
      }),
      curntText :this.formBuilder.group({
        CURRENT_TEXT: ['']
      }),
      DosesForm :this.formBuilder.group({
        TEXT_NUMBER: [''],
        TEXT_DATE: ['']
      }),
    });
  }
// nextQuestion button logic for single question event
 getNextQuestion(e: any){
  let formattedQuestion = {};
  this.questions.shift();
  formattedQuestion = this.formatSubQuestions(e.answerOption.subQuestion);
  if(formattedQuestion){
    this.questionsArray.push(formattedQuestion);
    this.questionsOptionSelected = false;
  }
   if(this.questions.length > 0){
      this.singleQuestion = this.questions[0];
      if(this.questions.length === 1) {
        this.showNextButton = false;
        this.showSaveButton = true;
    }
  }    
 }
 onSubmit(){
    this.FormValues = this.questionForm.value;
    console.log("Form", this.FormValues.value);
 }


  // save changes and emit data to format component
 saveChanges(e:any){
  this.getNextQuestion(e);
  this.eventService.setData(this.questionsArray);
  this.questions = [];
  this.singleQuestion = [];
  this.questionsArray = [];
  this.closeBtn.nativeElement.click();
 }
}