A fully animated, highly customizable, and easy-to-use notification library for Angular applications

Build & Test npm version Angular License

Features • Installation • Quick Start • Examples • Themes • API • Customization

Angular Notifier Animated Preview

Overview

Features

Installation

npm install gramli-angular-notifier

Angular Version Compatibility

Quick Start

1. Import the NotifierModule

For Module-Based Applications

import { NotifierModule } from 'gramli-angular-notifier';
@NgModule({
 imports: [
 // With custom configuration
 NotifierModule.withConfig({
 position: {
 horizontal: { position: 'right', distance: 12 },
 vertical: { position: 'top', distance: 12, gap: 10 }
 },
 theme: 'material'
 }),
 // Or with default configuration
 NotifierModule.withConfig()
 ]
})
export class AppModule { }

For Standalone Components

// main.ts or app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideNotifier } from 'gramli-angular-notifier';
export const appConfig: ApplicationConfig = {
 providers: [
 // With custom configuration
 provideNotifier({
 position: {
 horizontal: { position: 'right', distance: 12 },
 vertical: { position: 'top', distance: 12, gap: 10 }
 },
 theme: 'material'
 }),
 // Or with default configuration
 // provideNotifier()
 ]
};

2. AppComponent - Add the notifier container

For Module-Based Applications

@Component({
 selector: 'app-root',
 template: `
 <router-outlet></router-outlet>
 <notifier-container></notifier-container>
 `
})
export class AppComponent { }

For Standalone Components

import { Component } from '@angular/core';
import { NotifierModule } from 'gramli-angular-notifier';
@Component({
 selector: 'app-root',
 standalone: true,
 imports: [NotifierModule], // Import for components only
 template: `
 <router-outlet></router-outlet>
 <notifier-container></notifier-container>
 `
})
export class AppComponent { }

3. Import styles

// Import all styles (core + all themes + all types)
@use 'gramli-angular-notifier/styles';
// 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';

4. Use the NotifierService

import { NotifierService } from 'gramli-angular-notifier';
@Component({
 selector: 'app-example',
 template: `<button (click)="showNotification()">Show Notification</button>`
})
export class ExampleComponent {
 constructor(private notifier: NotifierService) { }
 showNotification() {
 this.notifier.notify('success', 'You are awesome!');
 }
}

Live Examples

📦 Module-Based Demo

⚡ Standalone Demo

Themes

Material Design Theme

NotifierModule.withConfig({ theme: 'material' })

Bootstrap Theme

NotifierModule.withConfig({ theme: 'bootstrap' })

PrimeNG Theme

NotifierModule.withConfig({ theme: 'primeng' })

API

NotifierService Methods

notify(type, message, id?)

this.notifier.notify('success', 'Operation completed successfully!');
this.notifier.notify('error', 'Something went wrong', 'error-id-123');

show(config)

this.notifier.show({
 type: 'warning',
 message: 'Your session will expire soon',
 id: 'session-warning',
 template: this.customTemplate
});

hide(id)

this.notifier.hide('notification-id');

hideNewest()

this.notifier.hideNewest();

hideOldest()

this.notifier.hideOldest();

hideAll()

this.notifier.hideAll();

Notification Types

Customization

Configuration Options

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

Custom Templates

@Component({
 selector: 'app-notifications',
 template: `
 <ng-template #customNotification let-notificationData="notification">
 <div class="custom-alert">
 <span class="icon">{{ getIcon(notificationData.type) }}</span>
 <span class="message">{{ notificationData.message }}</span>
 </div>
 </ng-template>
 `
})
export class NotificationsComponent {
 @ViewChild('customNotification', { static: true }) customTemplate: TemplateRef<any>;
 constructor(private notifier: NotifierService) { }
 showCustomNotification() {
 this.notifier.show({
 type: 'success',
 message: 'Custom styled notification!',
 template: this.customTemplate
 });
 }
 getIcon(type: string): string {
 const icons = { success: '✓', error: '✗', warning: '⚠', info: 'i' };
 return icons[type] || '•';
 }
}

Custom Themes

// my-custom-theme.scss
.notifier__notification--my-theme {
 border-radius: 8px;
 padding: 1rem 1.5rem;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 
 &.notifier__notification--success {
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color: white;
 }
 
 .notifier__notification-button {
 opacity: 0.8;
 &:hover { opacity: 1; }
 }
}

NotifierModule.withConfig({ theme: 'my-theme' })

Advanced Usage

Managing Notification Lifecycle

export class AppComponent {
 constructor(private notifier: NotifierService) { }
 showTemporary() {
 // Auto-hide after 3 seconds
 this.notifier.show({
 type: 'info',
 message: 'This will disappear soon',
 id: 'temp-notification'
 });
 }
 showPersistent() {
 // Stays until manually dismissed
 this.notifier.show({
 type: 'warning',
 message: 'Action required!',
 id: 'persistent-warning'
 });
 }
 hidePersistent() {
 this.notifier.hide('persistent-warning');
 }
 clearAll() {
 this.notifier.hideAll();
 }
}

Notification Stacking

// Limit to 3 visible notifications
NotifierModule.withConfig({ behaviour: { stacking: 3 } })
// Unlimited stacking
NotifierModule.withConfig({ behaviour: { stacking: false } })

Click and Hover Behaviors

NotifierModule.withConfig({
 behaviour: {
 // Hide notification on click
 onClick: 'hide',
 
 // Pause auto-hide timer on hover
 onMouseover: 'pauseAutoHide',
 
 // Or reset the timer on hover
 // onMouseover: 'resetAutoHide',
 }
})

Examples

Success notification with custom ID

this.notifier.notify('success', 'Profile updated successfully!', 'profile-update');

Error notification that stays visible

this.notifier.show({
 type: 'error',
 message: 'Failed to connect to server. Please try again.',
 id: 'connection-error'
});

Warning with custom behavior

NotifierModule.withConfig({
 behaviour: {
 autoHide: 10000, // Show for 10 seconds
 onClick: 'hide', // Dismiss on click
 onMouseover: 'pauseAutoHide' // Pause timer when hovering
 }
})

Sequential notifications

async showProgress() {
 this.notifier.notify('info', 'Starting process...');
 
 await this.performTask();
 this.notifier.hideAll();
 this.notifier.notify('success', 'Process completed!');
}

Best Practices

Tip

Position notifications wisely - Top-right or bottom-right positions are less intrusive for most applications.

Tip

Use appropriate types - Match notification types to your message severity to provide clear visual cues.

Tip

Set reasonable timeouts - Error messages should have longer auto-hide times (or no auto-hide) compared to success messages.

Warning

Avoid notification spam - Limit stacking to prevent overwhelming users. Consider using hideAll() before showing new critical notifications.

Note

Test on mobile - Notifications should be readable and dismissible on small screens. The built-in themes include responsive breakpoints.

Troubleshooting

Styles not appearing

@use 'gramli-angular-notifier/styles';

Notifications not showing

Animations not working

NotifierModule.withConfig({ animations: { enabled: true } })

Breaking Change in v21.x: Module imports

// Before (v20.x and earlier)
@NgModule({
 imports: [NotifierModule]
})
// After (v21.1.x)
@NgModule({
 imports: [
 NotifierModule.withConfig() // Use withConfig() even for default settings
 ]
})

Credits

License