sq-single-angular-modal
TypeScript icon, indicating that this package has built-in type declarations

3.1.3 • Public • Published

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.

Package Sidebar

Install

npm i sq-single-angular-modal

Weekly Downloads

1

Version

3.1.3

License

MIT

Unpacked Size

569 kB

Total Files

209

Last publish

Collaborators

  • tigorc