question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Modal not showing on Angular 2.4 and 4.

See original GitHub issue

Bug description:

Modal is not showing anymore after re-targeting web app to angular 4 and @angular/cli@1.0.0.

I was just going to look for another lib (since this one technically does not support my bootstrap version), but when I read this https://github.com/ng-bootstrap/ng-bootstrap/issues/1209 I decided to post here. Maybe it’s a bug or something changed. Anyway, this code was working:

let modal: NgbModalRef = this.modalService.open(this.config.createModal);
let modalInstance: BaseModal = modal.componentInstance as BaseModal;

where this.config.createModal is a component. Even though this lib does not officially support bootstrap 3, it was working fine for quite some time. But now it looks like the modal was opened but it’s not displayed. The body class modal-open is added:

screen shot 2017-03-30 at 08 48 31

The scrollbar disappears and the component’s (modal’s component) onInit method is hit. So I’m assuming is something related only to the visual component not being displayed.

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 4.0.0 (though I tried with 2.4 as well)

ng-bootstrap: 1.0.0-alpha.22

Bootstrap: 3.3.7

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:16 (3 by maintainers)

github_iconTop GitHub Comments

5reactions
pkozlowski-opensourcecommented, Mar 30, 2017

You might try alpha.17 as this is the last version before we’ve switched to Bootstrap 4 alpha.6: https://github.com/ng-bootstrap/ng-bootstrap/blob/master/CHANGELOG.md#100-alpha17-2017-01-09

2reactions
eesteincommented, Mar 30, 2017

screen shot 2017-03-30 at 14 34 23

Read more comments on GitHub >

github_iconTop Results From Across the Web

primeng v2.0.6 p-dialog is not a modal in angular 2.4.10
I am using a primeng modal v2.0.6 in an angular 2.4.10 component: ... but the modal does not show as modal. Any suggestion?...
Read more >
MDB Angular Frame Modal not showing when using modal ...
*Actual behavior*the modal service seems to get called, the parent component overlay goes gray, but no modal is shown. Resources (screenshots, code snippets ......
Read more >
Modal | Components - BootstrapVue
Modals will not render their content in the document until they are shown (lazily rendered). Modals, when visible, are rendered appended to the...
Read more >
Ionic Modals - Modal not showing (it used to though) and ...
For the popover issue, I pass an $event variable on a button click event and call the function, showAddP($event) like to. Here i...
Read more >
Getting started with Angular Dialog component - Syncfusion
Running the application ... Run the ng serve command in command window, it will serve your application and you can open the browser...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found