A simple solution for displaying modal windows in Angular.
npm install ngx-azh-modal --save
This library is built to work with Angular ^17.1.0.
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxAzhModalModule, NgxAzhModalConfigToken } from 'ngx-azh-modal';
import { AppComponent } from './app.component';
import { AppModalConfig } from './app-modal-config';
import { YourModalComponent } from './your-modal.component';
@NgModule({
imports: [BrowserModule, NgxAzhModalModule],
declarations: [AppComponent, YourModalComponent],
bootstrap: [AppComponent],
providers: [
{
// Global configuration for all modal windows of the application
provide: NgxAzhModalConfigToken,
useClass: AppModalConfig
}
]
})
export class MyAppModule {
}
// app-modal-config.ts
import { Injectable } from '@angular/core';
import { NgxAzhModalOptionsInterface, NgxAzhModalSizeEnum } from 'ngx-azh-modal';
@Injectable()
export class AppModalConfig implements NgxAzhModalOptionsInterface {
public size: NgxAzhModalSizeEnum = NgxAzhModalSizeEnum.LARGE;
public dontShowAgainId: string | undefined = undefined;
public notClosed: boolean = false;
public closeWhileNavigating: boolean = true;
}
// your-modal.component.ts
import { Component } from '@angular/core';
import { NgxAzhModalComponentInterface, NgxAzhModalResultSubject } from 'ngx-azh-modal';
@Component({
selector: 'app-your-modal',
template: `<!-- Template of you modal component -->`
})
export class YourModalComponent
implements NgxAzhModalComponentInterface</* interface link */> {
public result: NgxAzhModalResultSubject</* interface link */> = new NgxAzhModalResultSubject</* interface link */>();
public onCancel(): void {
this.result.cancel();
}
public onConfirm(): void {
this.result.confirm( /* you data to transfer */ );
}
}
// app.component.ts
import { Component } from '@angular/core';
import { NgxAzhModalService } from 'ngx-azh-modal';
import { YourModalComponent } from './your-modal.component';
@Component({
selector: 'app-root',
template: `
<!-- IMPORTANT: place this tag in your bootstrap component! -->
<ngx-azh-modal-placement></ngx-azh-modal-placement>`
})
export class AppComponent {
constructor(private modalService: NgxAzhModalService) {
}
/**
*
*/
public createModal(): void {
const cmp = this.modalService.open<YourModalComponent>(YourModalComponent);
cmp.instance.result.subscribe((result) => {
/* do something */
});
}
}
Inject the <ngx-azh-modal-placement></ngx-azh-modal-placement>
tag into your autoload component. Otherwise, the library will not be able to show the modal!
<!-- YOUR HTML -->
<ngx-azh-modal-placement></ngx-azh-modal-placement>
<!-- YOUR HTML -->
create(component, options): ComponentRef <T> | null
- Create modal.
Important: null
may be returned if the user previously selected “do not show again”.
-
component
[Type<T>
] - required Link to modal window. -
options
[NgxAzhModalOptionsInterface
] Modal options.
clear(): void
- Clear all modal windows.
size: number
- Returns the number of open modals.
-
size
[NgxAzhModalSizeEnum
] - Window dimensions.undefined
by default. -
dontShowAgainId
[string
] - Window ID if you want to use "don't show anymore".undefined
by default. -
notClosed
[boolean
] - True if the window cannot be closed by ESC, navigation or by clicking outside of it.false
by default. -
closeWhileNavigating
[boolean
] - Close the window when you navigate the app from one route to another.true
by default.
-
reason
[NgxAzhModalReasonEnum
] - Reason why the window was closed. -
value
[ResultT | undefined
] - Data to transfer. -
dontShowAgain
[boolean
] - Return true if you no longer wish to show this window to the user. ThedontShowAgainId
property must be passed in the window options when it is created.
Every modal window must implement this interface.
-
result
[NgxAzhModalResultSubject<ResultT>
] - You can subscribe to get the result of the modal window. You don't need to unsubscribe from "result". This happens automatically.
-
ESCAPE
- closed by ESC; -
BACKDROP
- closed by clicking outside; -
NAVIGATION
- closed by navigation; -
CANCEL
- closed by ModalResultSubject.cancel(); -
CONFIRM
- closed by ModalResultSubject.confirm();
Applies the following CSS classes to a modal window component.
-
SMALL
-.azh-modal--small
-
MEDIUM
-.azh-modal--medium
-
LARGE
-.azh-modal--large
-
FULLSCREEN
-.azh-modal--fullscreen
MIT