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

Question

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 · Accepted Answer · 2018-02-02 17:12:32Z

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.

edited Feb 2, 2018 at 17:12

answered Jan 31, 2018 at 4:02

charsi

4,15728 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martin Parenteau · Accepted Answer · 2018-01-31 03:25:53Z

1

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

edited Jan 31, 2018 at 3:25

answered Jan 31, 2018 at 3:22

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

4 Comments

charsi Over a year ago

Aware of those. But avoiding so I can learn a bit more angular before taking the easy way.

Dan Chase Over a year ago

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)

Martin Parenteau Over a year ago

@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.

Dan Chase Over a year ago

@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.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related