@stanvanheumen/ngx-notifications

ngx-notifications

A simple library that allows you to notify your users in your Angular 5+ app.

• Use command + F or ctrl + F to search for a keyword.
• Contributions welcome, please see contribution guide.

Features

• 🐫 Easy implementation
• 🐭 Lazy loading compatible
• 🐑 Angular Universal compatible
• 🐦 Ahead-Of-Time compilation compatible
• 🐒 Automatic support for multiple languages

Demo

Click here to play with the example

Installation

To use ngx-notifications in your project install it via npm or yarn:

# To get the latest stable version in dependencies

$ npm install @stanvanheumen/ngx-notifications --save

# or

$ yarn add @stanvanheumen/ngx-notifications

Setup

To get the correct fonts and icons you should add these two link-tags to the head section of your index.html (these are not included for performance).

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">

Import the NgxNotificationsModule in your AppModule and call the forRoot() method to receive a singleton of the NotificationsService.

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgxNotificationsModule} from '@stanvanheumen/ngx-notifications';
import {NgxTranslationsModule} from '@stanvanheumen/ngx-translations';

@NgModule({
    imports: [
        BrowserAnimationsModule, // or NoopAnimationsModule.
        NgxNotificationsModule.forRoot(),
        NgxTranslationsModule.forRoot(...) // Optional.
    ]
})
export class AppModule {}

Example

Add the <ngx-notifications-list></ngx-notifications-list> to your AppComponent. This will be the place where the notifications will be shown.

import {NotificationsService} from '@stanvanheumen/ngx-notifications';
import {Component, OnInit} from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
        <ngx-notifications-list></ngx-notifications-list>
    `
})
export class AppComponent implements OnInit {

    constructor(private notifications: NotificationsService) {
    }
    
    ngOnInit() {
        this.notifications.success('Something went really good!');
        this.notifications.error('Something went really bad!');
        this.notifications.warn('I want to warn you about something!');
        this.notifications.info('Just some relevant information.');
    }

}

Options

Notification

Property	Type	Required	Description
title	string	false	The title of the notification. (it's default is based on the type)
text	string	true	The text of the notification.
type	NotificationType	true	The type of the notification.
timeout	number	false	The time (in ms) that the notification will stay on the screen (default 4000ms).
icon	string	false	The icon of the notification. (it's default is based on the type)

Notification types

Enum
Success
Error
Warning
Info