ngx-notification

Angular Library to show all types of notifications in a Toast Notification format. It is very simple to setup and can be used for all types of notifications you want to show.

Parameters are: Message, Theme and Position.

You can also use your own custom css by setting the Theme parameter to 'none'.

Tested on Angular 6+

Install

npm install ngx-notification --save

Usage Example:

** Step 1: (After Installing) **

Add the Notification Component to your app.module.ts

import { NgxNotificationComponent } from 'ngx-notification';

and add:

NgxNotificationComponent

to the declarations part of the module.

You app.module might look like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { NgxNotificationComponent } from 'ngx-notification';

@NgModule({
  declarations: [
    AppComponent,
    NgxNotificationComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

** STEP 2: (Add the Service to you component(s) where you want to display the Notifications) **

In this case we are going to display notifications in the app.component.html

app.component.ts (Here is an example:)

import { Component } from '@angular/core';
import { NgxNotificationService } from 'ngx-notification';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private ngxNotificationService: NgxNotificationService) {}

  sendNotification() {
  	this.ngxNotificationService.sendMessage('This is my message to you!', 'dark', 'bottom-right');
  }

}

** STEP 3: **

All we need to do is to add:

<lib-ngx-notification></lib-ngx-notification>

to the app.component.html page.

In this example we are going to add a button click to show the Notification so the app.component.html page would look like this:

<button (click)="sendNotification()">Click here to test message</button> <br><br>

<lib-ngx-notification></lib-ngx-notification>

** And that is all! **

PARAMETERS / OPTIONS

The notifications are send like this:

this.ngxNotificationService.sendMessage('This is my message to you!', 'dark', 'bottom-right');

-- The first parameter is the Message which is a String.

-- The second parameter is the Theme.

• Options available are:

  dark, light, success, info, warning, danger and none.

If you use 'none' you can then add you own css to it by targetting class: ngx-notification

So, an example to add your own custom colors would be:

 .ngx-notification {
   background-color: #2d2d30;
   border-color: #272729;
   color: #c9c9c9;
 }

You would just add your own colors.

-- The last parameter is the position where you want the Notification to appear.

• Options are:

  top-left, top-right, bottom-left, bottom-right and center

Author

Steven Fernandez

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Changelog

[0.0.1] - 2018-05-12

Added

• First Commit

[1.0.0] - 2018-05-19

Added

• Updated Instructions on README

[1.0.1] - 2018-05-19

Added

• Updated Instructions on README and Keywords

[1.0.2] - 2018-05-19

Added

• Updated README - Cleaned Formatting

[1.0.3] - 2018-05-19

Fixed

• Updated README - Spelling Fixed

[1.0.4] - 2018-05-19

Added

• Updated - Package.json

[1.0.5] - 2018-05-19

Added

• Updated - Package.json