-
-## Demo
+# Angular Notifier
-You can play around with this library with **[this Stackblitz right here](https://stackblitz.com/edit/angular-notifier-demo)**.
+**A fully animated, highly customizable, and easy-to-use notification library for Angular applications**
-
+[](https://github.com/Gramli/angular-notifier/actions/workflows/ci.yml)
+[](https://www.npmjs.com/package/gramli-angular-notifier)
+[](https://angular.io)
+[](LICENSE)
-
+[Features](#features) • [Installation](#installation) • [Quick Start](#quick-start) • [Themes](#themes) • [API](#api) • [Customization](#customization)
-## How to install
+
-You can get **angular-notifier** via **npm** by either adding it as a new _dependency_ to your `package.json` file and running npm install,
-or running the following command:
+
-```bash
-npm install gramli-angular-notifier
-```
+## Overview
-
+Angular Notifier is a notification library designed to provide elegant, non-intrusive notifications for your Angular applications. With built-in animations, multiple themes, and extensive customization options, it helps you deliver a polished user experience without the complexity.
-### Angular versions
+**Key highlights:**
-The following list describes the compatibility with Angular:
+- **Highly customizable** - Configure positioning, behavior, animations, and appearance
+- **Fully animated** - Smooth slide and fade animations with customizable timing
+- **Multiple themes** - Material Design, Bootstrap, and PrimeNG-inspired styles out of the box
+- **Type-safe** - Written in TypeScript with full type definitions
+- **Lightweight** - Zero dependencies beyond Angular itself
+- **Production-ready** - Battle-tested and actively maintained
-| Angular Notifier | Angular | Compilation |
-| ---------------- | ------- | ------------------ |
-| `15.x` | `17.x` | Ivy (partial mode) |
-| `16.x` | `18.x` | Ivy (partial mode) |
-| `17.x` | `19.x` | Ivy (partial mode) |
-| `18.x` | `20.x` | Ivy (partial mode) |
+## Features
-For older versions visit:
-https://github.com/dominique-mueller/angular-notifier
+- **Rich notification types**: Success, error, warning, info, and custom types
+- **Flexible positioning**: Top, bottom, left, right, or center placement
+- **Smart behavior**: Auto-hide, stacking, pause on hover, and click handlers
+- **Animation presets**: Built-in fade and slide animations with customizable easing
+- **Multiple themes**: Material Design, Bootstrap-style, and PrimeNG-inspired themes
+- **Responsive design**: Mobile-optimized with responsive breakpoints
+- **Custom templates**: Use your own HTML templates for complete control
+- **Notification control**: Show, hide, and manage notifications programmatically
+- **Accessibility**: Keyboard navigation and ARIA support
-
+## Installation
-## How to setup
+Install via npm:
-Before actually being able to use the **angular-notifier** library within our code, we have to first set it up within Angular, and also
-bring the styles into our project.
+```bash
+npm install gramli-angular-notifier
+```
-
+### Angular Version Compatibility
-### 1. Import the `NotifierModule`
+| Angular Notifier | Angular |
+| ---------------- | ------- |
+| `21.x` | `21.x` |
+| `18.x` | `20.x` |
+| `17.x` | `19.x` |
+| `16.x` | `18.x` |
+| `15.x` | `17.x` |
-First of all, make **angular-notifier** globally available to your Angular application by importing (and optionally also configuring) the
-`NotifierModule` the your root Angular module. For example:
+> **Note**: This is a maintained fork of [dominique-mueller/angular-notifier](https://github.com/dominique-mueller/angular-notifier), updated to support the latest Angular versions. For older Angular versions, see the [original repository](https://github.com/dominique-mueller/angular-notifier).
-```typescript
-import { NotifierModule } from 'gramli-angular-notifier';
+## Quick Start
-@NgModule({
- imports: [NotifierModule],
-})
-export class AppModule {}
-```
+### 1. Import the NotifierModule
-But wait -- your probably might want to customize your notifications' look and behaviour according to your requirements and needs. To do so,
-call the `withConfig` method on the `NotifierModule`, and pass in the options. For example:
+Add the `NotifierModule` to your root module:
```typescript
import { NotifierModule } from 'gramli-angular-notifier';
@NgModule({
imports: [
+ NotifierModule,
+ // Or with custom configuration
NotifierModule.withConfig({
- // Custom options in here
- }),
- ],
+ position: {
+ horizontal: { position: 'right', distance: 12 },
+ vertical: { position: 'top', distance: 12, gap: 10 }
+ },
+ theme: 'material'
+ })
+ ]
})
-export class AppModule {}
+export class AppModule { }
```
-
-
-### 2. Use the `notifier-container` component
+### 2. Add the notifier container
-In addition, you have to place the `notifier-container` component somewhere in your application, best at the last element of your
-root (app) component. For example:
+Add the `` component to your app component template:
```typescript
@Component({
- selector: 'my-app',
+ selector: 'app-root',
template: `
-
Hello World
+
- `,
+ `
})
-export class AppComponent {}
+export class AppComponent { }
```
-> Later on, this component will contain and manage all your applications' notifications.
-
-
-
-### 3. Import the styles
+### 3. Import styles
-Of course we also need to import the **angular-notifier** styles into our application. Depending on the architecture of your Angular
-application, you want to either import the original SASS files, or the already compiled CSS files instead - or none of them if you wish to
-write your own styles from scratch.
+Import the styles in your global styles file (`styles.scss` or `styles.css`):
-#### The easy way: Import all the styles
+```scss
+// Import all styles (core + all themes + all types)
+@use 'gramli-angular-notifier/styles';
-To import all the styles, simple include either the `~/gramli-angular-notifier/styles.(scss|css)` file. It contains the core styles as well as all
-the themes and notification types.
+// Or import only what you need for better performance
+@use 'gramli-angular-notifier/styles/core';
+@use 'gramli-angular-notifier/styles/themes/theme-material';
+@use 'gramli-angular-notifier/styles/types/type-success';
+@use 'gramli-angular-notifier/styles/types/type-error';
-#### The advanced way: Only import the styles actually needed
-
-To keep the size if your styles as small as possible (improving performance for the perfect UX), your might instead decide to only import
-the styles actually needed by our application. The **angular-notifier** styles are modular:
-
-- The `~/gramli-angular-notifier/styles/core.(scss|css)` file is always required, it defines the basic styles (such as the layout)
-- Themes can be imported from the `~/gramli-angular-notifier/styles/theme` folder
-- The different notification types, then, can be imported from the `~/gramli-angular-notifier/styles/types` folder
+// Or use a complete theme bundle (recommended)
+@use 'gramli-angular-notifier/styles/themes/theme-material-complete';
+```
-
+> **Note**: The deprecated `@import` syntax still works but will show Sass deprecation warnings. We recommend using `@use` to avoid warnings in your build output.
-## How to use
+### 4. Use the NotifierService
-Using **angular-notifier** is as simple as it can get -- simple import and inject the `NotifierService` into every component (directive,
-service, ...) you want to use in. For example:
+Inject and use the `NotifierService` in your components:
```typescript
import { NotifierService } from 'gramli-angular-notifier';
@Component({
- // ...
+ selector: 'app-example',
+ template: ``
})
-export class MyAwesomeComponent {
- private readonly notifier: NotifierService;
+export class ExampleComponent {
+ constructor(private notifier: NotifierService) { }
- constructor(notifierService: NotifierService) {
- this.notifier = notifierService;
+ showNotification() {
+ this.notifier.notify('success', 'You are awesome!');
}
}
```
-
+## Themes
+
+Angular Notifier comes with three professionally designed themes:
-### Show notifications
+### Material Design Theme
-Showing a notification is simple - all your need is a type, and a message to be displayed. For example:
+Clean, modern design following Google's Material Design principles:
```typescript
-this.notifier.notify('success', 'You are awesome! I mean it!');
+NotifierModule.withConfig({ theme: 'material' })
```
-You can further pass in a _notification ID_ as the third (optional) argument. Essentially, such a _notification ID_ is nothing more but a
-unique string tha can be used later on to gain access (and thus control) to this specific notification. For example:
+- Subtle shadows and 3px border radius
+- Smooth opacity transitions
+- Compact and space-efficient
+
+### Bootstrap Theme
+
+Professional styling inspired by Bootstrap 5:
```typescript
-this.notifier.notify('success', 'You are awesome! I mean it!', 'THAT_NOTIFICATION_ID');
+NotifierModule.withConfig({ theme: 'bootstrap' })
```
-> For example, you might want to define a _notification ID_ if you know that, at some point in the future, you will need to remove _this
-> exact_ notification.
+- Alert-style contextual colors
+- 6px rounded corners with layered shadows
+- Responsive spacing with rem units
+- Enhanced hover effects and accessibility focus states
+
+### PrimeNG Theme
-**The syntax above is actually just a shorthand version of the following:**
+Modern, elegant design inspired by PrimeNG components:
```typescript
-this.notifier.show({
- type: 'success',
- message: 'You are awesome! I mean it!',
- id: 'THAT_NOTIFICATION_ID', // Again, this is optional
-});
+NotifierModule.withConfig({ theme: 'primeng' })
```
-
+- Rich, vibrant colors with left accent border
+- Multi-layered shadows for depth
+- Circular close button with rotation animation
+- Available in both dark and light variants (`primeng-light`)
-### Hide notifications
+## API
-You can also hide notifications. To hide a specific notification - assuming you've defined a _notification ID_ when creating it, simply
-call:
+### NotifierService Methods
+
+#### `notify(type, message, id?)`
+
+Show a notification with the specified type and message:
```typescript
-this.notifier.hide('THAT_NOTIFICATION_ID');
+this.notifier.notify('success', 'Operation completed successfully!');
+this.notifier.notify('error', 'Something went wrong', 'error-id-123');
```
-Furthermore, your can hide the newest notification by calling:
+#### `show(config)`
+
+Show a notification with detailed configuration:
```typescript
-this.notifier.hideNewest();
+this.notifier.show({
+ type: 'warning',
+ message: 'Your session will expire soon',
+ id: 'session-warning',
+ template: this.customTemplate
+});
```
-Or, your could hide the oldest notification:
+#### `hide(id)`
+
+Hide a specific notification by ID:
```typescript
-this.notifier.hideOldest();
+this.notifier.hide('notification-id');
```
-And, of course, it's also possible to hide all visible notifications at once:
+#### `hideNewest()`
+
+Hide the most recently shown notification:
```typescript
-this.notifier.hideAll();
+this.notifier.hideNewest();
```
-
+#### `hideOldest()`
-## How to customize
+Hide the oldest visible notification:
-From the beginning, the **angular-notifier** library has been written with customizability in mind. The idea is that **angular-notifier**
-works the way your want it to, so that you can make it blend perfectly into the rest of your application. Still, the default configuration
-should already provide a great User Experience.
+```typescript
+this.notifier.hideOldest();
+```
-> Keep in mind that **angular-notifier** can be configured only once - which is at the time you import the `NotifierModule` into your root
-> (app) module.
+#### `hideAll()`
-
+Hide all visible notifications:
-### Position
+```typescript
+this.notifier.hideAll();
+```
-With the `position` property you can define where exactly notifications will appear on the screen:
+### Notification Types
-```typescript
-position: {
+- `default` - Default notification style
+- `info` - Informational messages
+- `success` - Success confirmations
+- `warning` - Warning messages
+- `error` - Error alerts
- horizontal: {
+## Customization
- /**
- * Defines the horizontal position on the screen
- * @type {'left' | 'middle' | 'right'}
- */
- position: 'left',
+### Configuration Options
- /**
- * Defines the horizontal distance to the screen edge (in px)
- * @type {number}
- */
- distance: 12
+Configure Angular Notifier when importing the module:
+```typescript
+NotifierModule.withConfig({
+ position: {
+ horizontal: {
+ position: 'right', // 'left' | 'middle' | 'right'
+ distance: 12 // Distance from edge (px)
+ },
+ vertical: {
+ position: 'top', // 'top' | 'bottom'
+ distance: 12, // Distance from edge (px)
+ gap: 10 // Gap between notifications (px)
+ }
+ },
+
+ theme: 'material', // 'material' | 'bootstrap' | 'primeng' | 'primeng-light'
+
+ behaviour: {
+ autoHide: 5000, // Auto-hide after ms (false to disable)
+ onClick: 'hide', // 'hide' | false
+ onMouseover: 'pauseAutoHide', // 'pauseAutoHide' | 'resetAutoHide' | false
+ showDismissButton: true, // Show close button
+ stacking: 4 // Max visible notifications (false for unlimited)
},
+
+ animations: {
+ enabled: true,
+ show: {
+ preset: 'slide', // 'slide' | 'fade'
+ speed: 300, // Animation duration (ms)
+ easing: 'ease' // CSS easing function
+ },
+ hide: {
+ preset: 'fade',
+ speed: 300,
+ easing: 'ease',
+ offset: 50 // Stagger delay when hiding multiple (ms)
+ },
+ shift: {
+ speed: 300, // Duration for shifting notifications
+ easing: 'ease'
+ },
+ overlap: 150 // Animation overlap for smoother transitions (ms)
+ }
+})
+```
- vertical: {
+### Custom Templates
- /**
- * Defines the vertical position on the screen
- * @type {'top' | 'bottom'}
- */
- position: 'bottom',
+Create fully custom notification layouts using Angular templates:
- /**
- * Defines the vertical distance to the screen edge (in px)
- * @type {number}
- */
- distance: 12
+```typescript
+@Component({
+ selector: 'app-notifications',
+ template: `
+
+