Skip to content

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

Notifications You must be signed in to change notification settings

stanvanheumen/ngx-notifications

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published