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+
npm install ngx-notification --save
** 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! **
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
Steven Fernandez
This project is licensed under the MIT License - see the LICENSE.md file for details
- First Commit
- Updated Instructions on README
- Updated Instructions on README and Keywords
- Updated README - Cleaned Formatting
- Updated README - Spelling Fixed
- Updated - Package.json
- Updated - Package.json