CODEWITHSUNDEEP
angulartwitter-bootstrap
charsi
charsi

Reputation: 3897

How to use bootstrap modal with angular 2+ without using jquery?

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.

Upvotes: 1

Views: 3863

Answers (2)

charsi
charsi

Reputation: 3897

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.

Upvotes: 6

Martin Parenteau
Martin Parenteau

Reputation: 73761

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

Upvotes: 1

Related Questions