sq-sq-single-angular-modal

sq-single-angular-modal

bootstrap modals for angular 4+

A Quick walkthrough

Install sq-single-angular-modal:

    npm install sq-single-angular-modal --save

Configure root element

import { Component, ViewContainerRef } from '@angular/core';
import { Overlay } from 'sq-single-angular-modal';
import { Modal } from 'sq-single-angular-modal/plugins/bootstrap';

@Component({
  selector: 'my-app',
  template: `<button (click)="onClick()">Alert</button>`
})
export class AppComponent {
  constructor(overlay: Overlay, vcRef: ViewContainerRef, public modal: Modal) {
    overlay.defaultViewContainer = vcRef;
  }

  onClick() {
    this.modal.alert()
        .size('lg')
        .showClose(true)
        .title('A simple Alert style modal window')
        .body(`
            <h4>Alert is a classic (title/body/footer) 1 button modal window that
            does not block.</h4>
            <b>Configuration:</b>
            <ul>
                <li>Non blocking (click anywhere outside to dismiss)</li>
                <li>Size large</li>
                <li>Dismissed with default keyboard key (ESC)</li>
                <li>Close wth button click</li>
                <li>HTML content</li>
            </ul>`)
        .open();
  }
}

Declare application module

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';

import { ModalModule } from 'sq-single-angular-modal';
import { BootstrapModalModule } from 'sq-single-angular-modal/plugins/bootstrap';

import { AppComponent }   from './app.component';

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

Bootstrap your application

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// The app module
import { AppModule } from './app.module';

// Compile and launch the module
platformBrowserDynamic().bootstrapModule(AppModule);

Opening a modal using the open() method

Drop in's are nice for quick interaction with modals, however in some cases we need more control.
For this we can use the open() method, which is used by all drop in's internally.