# @pascaliske/ngx-notifications

> Notification module for Angular v17+.

Latest version **3.0.2** (published 2025-12-08) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @pascaliske/ngx-notifications
pnpm add @pascaliske/ngx-notifications
yarn add @pascaliske/ngx-notifications
bun add @pascaliske/ngx-notifications
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2025-12-08 |
| First published | 2018-08-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 44.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Pascal Iske |
| Maintainers | pascaliske |

## Links

- npm: https://www.npmjs.com/package/@pascaliske/ngx-notifications
- Repository: https://github.com/pascaliske/ngx-notifications
- Issues: https://github.com/pascaliske/ngx-notifications/issues
- npm.io page: https://npm.io/package/@pascaliske/ngx-notifications

## Dependencies (2)

- [uuid](https://npm.io/package/uuid.md) ^13.0.0
- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Recent versions

- 3.0.2 (latest) — 2025-12-08
- 3.0.1 — 2025-07-20
- 3.0.0 — 2025-04-23
- 2.1.3 — 2022-05-27
- 2.1.2 — 2022-05-27
- 2.1.0 — 2022-02-15
- 2.0.1 — 2021-05-03
- 1.5.2 — 2020-07-25
- 1.4.2 — 2020-03-24
- 1.4.1 — 2020-02-28
- 1.4.0 — 2019-12-28
- 1.3.2 — 2019-06-28
- 1.3.1 — 2019-06-18
- 1.3.0 — 2019-06-10
- 1.2.0 — 2019-02-01
- … 10 more at https://npm.io/package/@pascaliske/ngx-notifications/versions

## README

# `@pascaliske/ngx-notifications`

[![npm (scoped)](https://img.shields.io/npm/v/@pascaliske/ngx-notifications.svg?style=flat-square)](https://www.npmjs.com/package/@pascaliske/ngx-notifications) [![GitHub Tag](https://img.shields.io/github/tag/pascaliske/ngx-notifications.svg?style=flat-square)](https://github.com/pascaliske/ngx-notifications) [![Build Status](https://img.shields.io/github/workflow/status/pascaliske/ngx-notifications/Test%20package/master?label=test&style=flat-square)](https://github.com/pascaliske/ngx-notifications/actions) [![Awesome Badges](https://img.shields.io/badge/badges-awesome-green.svg?style=flat-square)](https://github.com/Naereen/badges)

## Installation

To install the module use the following command:

```bash
$ ng add @pascaliske/ngx-notifications
```

## Usage

1. Import the `provideNotifications()` function in your application configuration file.:

    ```typescript
    import type { ApplicationConfig } from '@angular/core'
    import { provideNotifications } from '@pascaliske/ngx-notifications'

    export const appConfig: ApplicationConfig = {
        providers: [
            provideExperimentalZonelessChangeDetection(),
            provideNotifications(),
        ],
    }
    ```

2. Add the following line to your app's template:

    ```html
    <cmp-notifications></cmp-notifications>
    ```

3. Access the `NotificationsService` in your components:

    ```typescript
    import { Component, OnInit } from '@angular/core'
    import { NotificationsService } from '@pascaliske/ngx-notifications'

    @Component({
        selector: 'cmp-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss'],
    })
    export class AppComponent implements OnInit {
        public constructor(private notificationService: NotificationsService) {}

        public ngOnInit(): void {
            this.notificationService.info('Hello World!')
        }
    }
    ```

4. Style the notifications with your own styles:

    ```scss
    .cmp-notifications {
        // the notifications list
    }

    .cmp-notification {
        // a single notification

        &--info {
            // info styles
        }

        &--success {
            // success styles
        }

        &--warning {
            // warning styles
        }

        &--error {
            // error styles
        }
    }
    ```

## License

MIT © [Pascal Iske](https://pascaliske.dev)

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