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,917
  • 22
  • 40

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,917
  • 22
  • 40
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
  • 70,558
  • 13
  • 122
  • 146
  • Aware of those. But avoiding so I can learn a bit more angular before taking the easy way. – charsi Jan 31 '18 at 03:23
  • A library (ng-*) for a library (bootstrap), for a library (angular), all to avoid a library (jquery) Sounds good! (or just use moment.js, who says there's no room for comedy on SO) – Dan Chase Aug 30 '22 at 04:31
  • @DanChase - The goal is to use a library (ng-bootstrap or ngx-bootstrap) that blends naturally with Angular, instead of jQuery which does not. As for the Bootstrap "library", it is just a set of CSS files. – ConnorsFan Aug 30 '22 at 13:16
  • @ConnorsFan it also has a .js that depends on JQuery and PopperJS, rest assure I do see the point, it's the reason someone made them. My amusement is more along the line of, but Google could have just made Angular with well with JQuery - but it really does, for now. – Dan Chase Sep 06 '22 at 21:56