ngx-modal

Open modal window for your Angular X application

INSTALL

``
npm i -S
`

USAGE

#### Example 1: Route modal
1. Add 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 { }
`
3. Add link, e.g. Greetings, Joe!
4. Create GreetingsModalComponent
`ts
@Component({
template:


Example Modal Content


})
export class GreetingsModalComponent {

@ViewChild(ModalComponent) protected modal: ModalComponent;

constructor() { }

}
`

#### Example 2: Confirm
1. Import ModalConfirmComponent
2. Add following markup to your component template
`
title="Confirmation"
content="Are you are sure?"
(closemodal)="onCloseConfirm()"
>
Confirm
`
3. Add openConfirm method
`ts
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:
`ts
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: '×',
/**
* 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 Custom settings for modal,
supported settings: routeOnClose, routeOutlets, backOnClose, isOpenClass, isNotificationClass, popupOpenedClass

Outputs:
* closemodal: EventEmitter
* openmodal: EventEmitter

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
* okayLabel: string = 'Okay' Okay button label
* cancelLabel: string = 'Cancel'

Outputs:
* closemodal: EventEmitter

Properties:
* result: readonly Subject Result of confirm
* isOpen: readonly boolean
* okay: readonly Observable 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

#### ModalFooterComponent

Selector: modal-footer

#### ModalContentComponent

Selector: modal-content

#### ModalConfirmService
Create modal confirm popup dynamically.

Methods:
* open(viewContainerRef: ViewContainerRef, componentType: Type, settings?: Partial): Observable

Example usage:
``js
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`