ng-bootstrap-modal-stack

NG Bootstrap Modal Stack - Secondary Modal for NG Bootstrap

This project is a workaround to display a secondary modal on top of the one from NG Bootstrap.

Table of Contents

• Demo
• Dependencies
• Installation
  • SCSS
  • SystemJS
• Supported browsers

Demo

View it in action : https://stackblitz.com/edit/ng-bootstrap-modal-stack

Dependencies

• Angular (tested with 5.0.2)
• Bootstrap 4 (tested with 4.0.0)
• NG Bootstrap (tested with 1.1.2)

Installation

After installing the above dependencies, install ng-bootstrap-modal-stack via:

npm install --save ng-bootstrap-modal-stack

Once installed you need to import our main module:

import {NgbModalStackModule} from 'ng-bootstrap-modal-stack';

The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice NgbModalStackModule.forRoot()):

import {NgbModalStackModule} from 'ng-bootstrap-modal-stack';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModalStackModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application can simply import NgbModalStackModule:

import {NgbModalStackModule} from 'ng-bootstrap-modal-stack';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModalStackModule, ...], 
})
export class OtherModule {
}

SCSS

You need to import the custom scss for the secondary modal.

@import "~ng-bootstrap-modal-stack/index";

SystemJS

If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.

In your systemjs config file, map needs to tell the System loader where to look for ng-bootstrap-modal-stack:

map: {
  'ng-bootstrap-modal-stack': 'node_modules/ng-bootstrap-modal-stack/bundles/ng-bootstrap.js',
}

Supported browsers

We support the same browsers and versions supported by both Bootstrap 4 and Angular, whichever is more restrictive. See this for up-to-date Angular browser support.

• Chrome (45+)
• Firefox (40+)
• IE (10+)
• Edge (20+)
• Safari (7+)

Also check Bootstrap 4's notes on browsers support.