Skip to content

Open modal window for your Angular X application

License

Notifications You must be signed in to change notification settings

unlight/ngx-modal

Repository files navigation

ngx-modal

Open modal window for your Angular X application

INSTALL

npm i -S <package-name>

USAGE

Example 1: Route modal

  1. Add <router-outlet name="modal"></router-outlet> to AppComponent template
  2. Configure AppModule
// app.module.ts
@NgModule({
    imports: [
        ModalModule.forRoot(options),
        RouterModule.forRoot([
            { path: 'greet/:user', outlet: 'modal', component: GreetingsModalComponent },
        ]),
    ]
})
export class AppModule { }
  1. Add link, e.g. <a [routerLink]="['.', { outlets: { 'modal': 'greet/joe'} }]">Greetings, Joe!</a>
  2. Create GreetingsModalComponent
@Component({
    template: `
<modal [isOpen]="true">
    <modal-header title="Greetings"></modal-header>
    <modal-content>Example Modal Content</modal-content>
</modal>
    `
})
export class GreetingsModalComponent {

    @ViewChild(ModalComponent) protected modal: ModalComponent;

    constructor() { }

}

Example 2: Confirm

  1. Import ModalConfirmComponent
  2. Add following markup to your component template
<modal-confirm #confirm 
    title="Confirmation" 
    content="Are you are sure?"
    (closemodal)="onCloseConfirm()"
></modal-confirm>
<a (click)="openConfirm()">Confirm</a>
  1. Add openConfirm method
export class AppComponent {

    @ViewChild(ModalConfirmComponent) private confirm: ModalConfirmComponent;
    confirmSubscription: Subscription;

    protected openConfirm() {
        this.confirm.open();
        this.confirmSubscription = this.confirm.okay.subscribe(() => {
            console.log('Okay...');
        });
    }

    protected onCloseConfirm() {
        this.confirmSubscription.unsubscribe();
    }
}

CONFIGURATION

ModalModule has some configuration

@NgModule({
    imports: [
        ModalModule.forRoot(modalOptions),
    ]
})

Where modalOptions is defaults of following:

export const defaultOptions: ModalOptions = {
    popupOpenedClass: 'ngx-modal-popup-opened',
    isOpenClass: 'ngx-modal-open',
    isNotificationClass: 'ngx-modal-notification',
    popupClass: 'ngx-modal-popup',
    bodyClass: 'ngx-modal-body',
    headerClass: 'ngx-modal-header',
    footerClass: 'ngx-modal-footer',
    contentClass: 'ngx-modal-content',
    /**
     * Class for close button in modal-header component.
     */
    buttonCloseClass: 'ngx-modal-button-close',
    /**
     * Content in close button tag.
     */
    buttonCloseContent: '&times;',
    /**
     * Navigate back when modal close
     */
    backOnClose: true,
    hasCloseButton: true,
    confirmFooterToolbarClass: 'ngx-modal-confirm-footer-toolbar',
    /**
     * Class wrapper for modal-confirm2 component buttons toolbar.
     */
    confirmFooterButtonsClass: '',
    confirmFooterButtonItemClass: '',
    confirmOkayButtonClass: '',
    confirmCancelButtonClass: '',
    /**
     * When true, when modal closes router.navigate() will be called with options relativeTo: activatedRoute.parent
     */
    closeRelativeToParent: false,
    /**
     * Content box class for modal-confirm3 component
     */
    confirmContentBoxClass: '',
};

API

ModalModule

  • ModalModule.forRoot(modalOptions) override default options
  • ModalModule.forChild(modalOptions) set modal options for this module

ModalComponent

Selector: modal

Inputs:

  • routed: boolean Set flag indicating that modal is routed
  • isOpen: boolean Open modal when component initialized
  • isNotification: boolean
  • settings: Partial<ModalOptions> Custom settings for modal, supported settings: routeOnClose, routeOutlets, backOnClose, isOpenClass, isNotificationClass, popupOpenedClass

Outputs:

  • closemodal: EventEmitter<void>
  • openmodal: EventEmitter<void>

Methods:

  • open: void Open modal
  • close: void Close modal

ModalConfirmComponent

Selector: modal-confirm

Inputs:

  • title: string
  • content: string
  • isNotification: boolean If true add notification class popup
  • settings: Partial<ModalOptions>
  • okayLabel: string = 'Okay' Okay button label
  • cancelLabel: string = 'Cancel'

Outputs:

  • closemodal: EventEmitter<void>

Properties:

  • result: readonly Subject` Result of confirm
  • isOpen: readonly boolean
  • okay: readonly Observable<boolean> Observable of result filtered to true

Methods:

  • open Open modal confirm

ModalConfirm2Component

Selector: modal-confirm2

Inputs: See ModalConfirmComponent

Properties: See ModalConfirmComponent

Methods: See ModalConfirmComponent

ModalConfirm2Component inherits ModalConfirmComponent, the only difference is markup. In ModalConfirm2Component modal-footer is not used.

ModalConfirm3Component

Selector: modal-confirm3

Inputs: See ModalConfirmComponent

Properties: See ModalConfirmComponent

Methods: See ModalConfirmComponent

ModalConfirm3Component inherits ModalConfirmComponent, the only difference is markup.
Used more advanced markup in footer.

ModalHeaderComponent

Selector: modal-header

Inputs:

  • title: string
  • hasCloseButton: boolean
  • closeButtonId: string

Properties:

  • closeEventEmitter: EventEmitter<any>

ModalFooterComponent

Selector: modal-footer

ModalContentComponent

Selector: modal-content

ModalConfirmService

Create modal confirm popup dynamically.

Methods:

  • open(viewContainerRef: ViewContainerRef, componentType: Type<ModalConfirmComponent>, settings?: Partial<ModalConfirmComponent>): Observable<boolean>

Example usage:

export class AppComponent {

    constructor(
        private modalConfirmService: ModalConfirmService,
        private viewContainerRef: ViewContainerRef,
    ) { }

    openModalConfirmService() {
        this.modalConfirmService.open(this.viewContainerRef, ModalConfirmComponent)
            .pipe(take(1))
            .subscribe(result => {
                // true - ok, false - cancel
                console.log('confirm result', result);
            });
    }
}

Note: You MUST subscribe to observable, otherwise modal will not be closed.

DEVELOPMENT

  • npm run dev