NiraModal

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.

Installation

npm i nira-modal

How To Open Modal

1. First inject NiraModalModule in the module you want to use nira-modal in it; like bellow:

import { NiraModalModule} from 'nira-modal';
@NgModule({
//other imports
imports: [NiraModalModule],
})

2. Declare @Input() variables: You must declare NiraModalConfig and closeSubject with @Input() directive in component.tslike bellow:

 @Input() config!: NiraModalConfig;
 @Input() closeSubject!: Subject<any>;

3. Opening modal:

• Inject NiraModalService in component.ts file like this:

constructor(private niraModalService: NiraModalService) {}

• In the method called in component.ts file, call this.niraModalService.open() and pass the component you want to show in it like bellow:

openModal(){
this.niraModalSerevice.open(TestModalComponent)}

Implementation

implement IModal interface to the component class to prevent forgetting @Input() directives:

export class TestModalComponent implements IModal {}

How To Pass data From Parent Component To nira-modal

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,
    });}

How To Close Modal

Now You can close nira-modal by calling .next() method in this.closeSubject like bellow:

 close() {
  this.closeSubject.next();
}

How To Emit result From Modal

1. 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);
}

2. 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) => {});
   }

How To Customize Modal

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 property | optional | 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
    });
  }