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](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