Twitter-бутстрап модальный не работает в угловых

Question

Я пытаюсь реализовать загрузочный модал в angular 7, но модал не работает.

В моем файле angular.json в сценариях я включаю jquery.min.js и bootstrap.min.js в этом порядке.

Мой component.html:

<button type="button" class="catalogue-button btn btn-primary btn-lg" data-toggle="modal"
         data-target="catalogueModal">Katalog</button>
         <!-- The Modal -->
         <div class="modal" id="catalogueModal">
            <div class="modal-dialog">
               <div class="modal-content">

                  <!-- Modal Header -->
                  <div class="modal-header">
                     <h4 class="modal-title">Modal Heading</h4>
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                  </div>

                  <!-- Modal body -->
                  <div class="modal-body">
                     Modal body..
                  </div>

                  <!-- Modal footer -->
                  <div class="modal-footer">
                     <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                  </div>

               </div>
            </div>
         </div>

Когда я нажимаю на кнопку, ничего не происходит. Консоль браузера тоже пуста.

Я использую это https://www.w3schools.com/bootstrap/bootstrap_modal.asp

Answer 1

Взгляните на ngx-bootstrap . Это возможность использовать начальную загрузку «угловой путь» без необходимости jquery.

Это хорошо задокументировано, и вы найдете много небольших примеров. Здесь - документация для использования модального режима.

Answer 2

Чтобы открыть модал, сделайте следующие изменения в вашем коде:

вставьте новую кнопку в ваш файл component.html:

<button (click)="showModal()">Show</button>

В вашем машинописном файле для того же компонента добавьте этот метод:

  showModal() {
    $("#catalogueModal").modal('show');
  }

вверху файла перед @Component добавить эту строку:

declare var $: any;