Based on ng-notify for Angular 6.x
npm install ng6-notify-popup``bash`
$ npm install --save ng6-notify-popupAppModuleUsage
:`typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
/** IMPORTANT : IE10 and IE11 requires the following to support @angular/animation (which is used by this module).npm install --save web-animations-js
Run .
*/
import 'web-animations-js';
// Import library
import { Ng6NotifyPopupModule } from 'ng6-notify-popup';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Add module to imports
Ng6NotifyPopupModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`
Once your library is imported, you can use its Notification service
`typescript
// You can now use this library service to show popup anywhere in angular app
import { Component } from '@angular/core';
import { Ng6NotifyPopupService } from 'ng6-notify-popup';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [Ng6NotifyPopupService]
})
export class AppComponent {
constructor(private notify: Ng6NotifyPopupService) { }
// to append in body
show(text: string, type: string): void {
this.notify.show(text, { position:'top', duration:'2000', type: 'success' });
}
// to append in any other component.
showModular(text: string, type: string): void {
this.notify.show(text, { position:'top', duration:'2000', type: 'success', location: '#modular' });
}
``API
$3
This method can be used to override the default configuration provided by the module. All params are optinaltypescript`
Ng6NotifyPopupService.setConfig({
position: 'top/bottom',
type: 'info/success/warn/error/grimace/default',
duration: 4000,
sticky: true/false,
})show()$3
method can be called with an optional second argument to override the global default config`typescript`
// Simple notification
Ng6NotifyPopupService.show("Success");
// Notification with options
Ng6NotifyPopupService.show("Error occured", { position: 'top', type: 'error' })
//Show notification inside a division (MUST have position:relative)
Ng6NotifyPopupService.show("Inside a div", { location: '#my-div' })`$3
typescript`
// Destroy any active notification
Ng6NotifyPopupService.destroy();
in CSS as follows
`CSS
.trb-wild {
background-color: #f4a460;
}
`
Development
To generate all
.js, .d.ts and *.metadata.json files:`bash
$ npm run build
`To lint all
*.ts files:`bash
$ npm run lint
``