1

I have included Bootstrap CSS in my project but not the its Javascript or jquery bits. I have figured out how to open and close dropdown menus etc with just angular but haven't been able to trigger the modal.

How do I open (and close) a modal dialog without using Bootstraps's javascript or jQuery?

I am quite new to angular so this might be too obvious for SO. Still creating a question so I can answer it later.

charsi
  • 2,406
  • 18
  • 39

2 Answers2

6

Without using any Angular plugins this is the easiest way to do it --

Add (click)="showModal=true" to the button element which should open the modal.

Add [ngClass]="{'show': showModal}" to the modal element.

Since it is not polite to show a modal without a way to close it. Create a close button in the modal and add this (click)="showModal=false".

Add following css to the modal component

.modal.show {
    display:block;
  }

So when the button is pressed a 'show' class is added to the modal which unhides the modal. When the close button removes this class the modal is hidden again.

This works for bootstrap 4.

charsi
  • 2,406
  • 18
  • 39
1

Here are two Angular implementations of the Bootstrap components: ng-bootstrap and ngx-bootstrap. Both of them allow to use Bootstrap without jQuery.

ConnorsFan
  • 65,481
  • 11
  • 106
  • 136