This library Supports Angular CLI versions greater than or equal to 16.1.0.
This package creates a modal that gives you ability to access and customize some modal features, such as the color of the screen and ability to control whether the modal can be closed by clicking outside.
You can pass data
to nira-modal
and get result
from that.
npm i nira-modal
-
First inject
NiraModalModule
in the module you want to usenira-modal
in it; like bellow:
import { NiraModalModule} from 'nira-modal';
@NgModule({
//other imports
imports: [NiraModalModule],
})
- Declare
@Input()
variables: You must declareNiraModalConfig
andcloseSubject
with@Input()
directive incomponent.ts
like bellow:
@Input() config!: NiraModalConfig;
@Input() closeSubject!: Subject<any>;
- Opening modal:
- Inject
NiraModalService
incomponent.ts
file like this:
constructor(private niraModalService: NiraModalService) {}
- In the method called in
component.ts
file, callthis.niraModalService.open()
and pass the component you want to show in it like bellow:
openModal(){
this.niraModalSerevice.open(TestModalComponent)}
implement IModal
interface to the component class to prevent forgetting @Input()
directives:
export class TestModalComponent implements IModal {}
You can pass any data to nira-modal
with data
property , exists in NiraModalConfig
interface whilethis.niraModalService.open()
method is called:
openModal() {
// 'modalData' is any data with any type you want to pass
const modal = this.niraModalService.open(TestModalComponent, {
data: modalData,
});}
Now You can close nira-modal
by calling .next()
method in this.closeSubject
like bellow:
close() {
this.closeSubject.next();
}
-
Emit Data From modal:
you can emit any data by passing in the
this.closeSubject.next()
method while closing modal:
close() {
// 'modalResult'is any data you want to pass from modal to parrent component
this.closeSubject.next(modalResult);
}
- Receive Emitted Data in parant component:
- Assign
this.niraModalService.open(YourModalComponent)
to a variable:
openModal() {
// 'modalData' is any data with any type you want to pass
const modal = this.niraModalService.open(TestModalComponent);
}
- Subscribe
.afterClosed()
method in assigned variable:
openModal() {
// 'modalData' is any data with any type you want to pass
const modal = this.niraModalService.open(TestModalComponent);
modal.afterClosed.subscribe((modalResult) => {});
}
You can customize nira-modal with some config in object structure by passing them in
this.niraModalService.open()
method . this is NiraModalConfig
interface with all optional properties you can pass :
interface NiraModalConfig {
outsideClose?: boolean;
screenColor?: string;
data?: any;
}
-
Config description:
property description Required/Optional default value outsideClose
by passing false
with this property you can prevent closing modal by clicking outside.optional true
screenColor
can customize color of screen behind the modal optional #0000004f
data
You can pass any data you want to nira-modal
with this propertyoptional undefined
- Example of
nira-modal
customization:
constructor(private niraModalSerevice: NiraModalService) {} openModal() { let modalData = {name:'Nira', age:20} this.niraModalSerevice.open(TestModalComponent, { outsideClose: false, screenColor: 'rgba(0, 0, 255, 0.3)', data: modalData }); }
- Example of