# nira-modal

> 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

Latest version **1.1.5** (published 2026-08-31) · 0 weekly downloads

## Install

```sh
npm install nira-modal
pnpm add nira-modal
yarn add nira-modal
bun add nira-modal
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2026-08-31 |
| First published | 2024-02-03 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 43.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | nira2024 |

## Links

- npm: https://www.npmjs.com/package/nira-modal
- npm.io page: https://npm.io/package/nira-modal

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 1.1.5 (latest) — 2026-08-31
- 1.1.1 — 2026-08-26
- 1.0.7 — 2024-04-09
- 1.0.6 — 2024-04-09
- 1.0.5 — 2024-03-28
- 1.0.4 — 2024-03-25
- 1.0.3 — 2024-02-21
- 1.0.2 — 2024-02-19
- 1.0.1 — 2024-02-04
- 0.0.2 — 2024-02-04
- 0.0.1 — 2024-02-04
- 0.0.4 — 2024-02-03

## README

# 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:

```javascript
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.ts`like bellow:

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

3. **Opening modal**:

- Inject `NiraModalService` in `component.ts` file like this:

```javascript
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:

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

## Implementation

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

```javascript
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 while`this.niraModalService.open()` method is called:

```javascript
  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:

```javascript
 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:

```javascript
 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:

```javascript
openModal() {
 // 'modalData' is any data with any type you want to pass
   const modal = this.niraModalService.open(TestModalComponent);
   }
```

- Subscribe `.afterClosed()` method in assigned variable:

```javascript
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 :

```javascript
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:

  ```javascript
  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
    });
  }
  ```

---
_Source: https://npm.io/package/nira-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._