Bootstrap4 Модал в Angular - PullRequest
       16

Bootstrap4 Модал в Angular

1 голос
/ 04 мая 2020

Я хочу открыть модальное окно bootstrap4 на Angular, когда мое условие в методе booktour истинно, а не при прямом нажатии кнопки. как мне это сделать? Мой код ниже

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>

и файл TS

 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');
         });
      }

  }
}

1 Ответ

0 голосов
/ 04 мая 2020

Вы должны были написать

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

и в css

.show {
   display:block;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...