Angular Open Modal

This component provides a simple way to instantiate modals on angular.

Installation

To install, run npm install ngx-open-modal. Place BrowserModule from @angular/platform-browser/animations on app.module imports.

Usage

• Have a component you want to become a modal.
• Implement the OpenModal class into it.
• Inject ModalService where you want the modal to be instantiated from.
• run the show function with the desired settings.
• run waitForDismiss so that the modal can disappear.

Example

The component to become a modal

1import { Component, EventEmitter } from '@angular/core';
2import { OpenModal, ModalData } from 'ngx-open-modal';
3
4@Component({
5  selector: 'app-auth',
6  template: `<button (click)="this.login('somedata')">app-auth works</button>`
7  styleUrls: ['./auth.component.scss']
8})
9export class ExampleComponent implements OpenModal {
10
11  dismiss = new EventEmitter<ModalData>;
12
13  login(name: string) {
14    this.dismiss.emit({ name })
15  }

The component which will show the modal

1import { ModalService } from 'ngx-open-modal';
2import { ExampleComponent } from './example.component';
3import { Component, ViewContainerRef } from '@angular/core';
4
5@Component({
6  selector: 'app-header',
7  template: '<a (click)="showModal()">Login</a>'
8})
9export class AnotherComponent implements OnInit {
10
11  constructor(
12    private viewContainerRef: ViewContainerRef,
13    private modalService: ModalService,
14  ) { }
15
16  async showModal() {
17    const modal = this.modalService.show({
18      component: ExampleComponent,
19      rootContainer: this.viewContainerRef
20    })
21
22    const result = await this.modalService.waitForDismiss(modal)
23    return result['name']
24  }
25}

API

ModalSettings

• component: any - The component to be loaded.
• rootContainer: ViewContainerRef - The root container for the modal to be loaded in.
• dismissOnBackdrop?: boolean - Whether the modal should should dismiss on backdrop click.
• timeout?: number - The time in miliseconds until the alert destroys itself, leave empty for never.
• input?: { [key: string]: any }; - Any data you may want to be passed to the modal on creation.

ModalData

Optional data sent from the modal through dismiss event.

• { [key: string]: any }