Angular 中的 Bootstrap4 模态

Question

I want to popup bootstrap4 modal window on Angular when my condition in booktour method is true, not by directly clicking the button. How should I do it? My code is below

html
<div class="modal" id="myModal" [ngClass]="{show: showModalError}">
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
             <h4 class="modal-title">Sorry</h4>         
           </div>

           <div class="modal-body">
             Exceeded the maximum number of tour participants!
           </div>

           <div class="modal-footer">
             <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="showModalError=false">Close</button>
           </div>
         </div>
       </div>
</div>

<button class="btn btn-primary" (click)="bookTour()" > Book</button>

and ts file

 bookTour() {
    if (this.curPersonNumber + this.number_of_persons > this.tourPersonNumber){
      this.showModalError = true;
    } else {
         this.showModalError = false;
         const bookingRequest = this.bookingForm.getRawValue() as BookingRequest;
         this.bookingService.bookTour(bookingRequest, this.tourId, this.tourDetailId).subscribe(perf => {
         this.router.navigateByUrl('/account');
         });
      }

  }
}

Answer 1

You had to write

[ngClass]="{'show': showModalError}" (you forgot to put '' to show css class)

and in css

.show {
   display:block;
}