In this post we will show you how to show Angular 4 notification Popup Component or display Notify Popup using Angular 4, hear we will give you demo for Angular 4 notification Popup Component and how to implement it and source code. given following link show demo, Download and git source code.
A simple, lightweight module for displaying notifications in your Angular 4 and Angular 2 apps. Since alerts / notifications area unit essential part for any connected internet application, we’ve few alerts / notifications part accessible in marketplace for angular2, i’m exploitation ng-lightning notifications.
By using this module we can show different style of Angular 4 notificationPopup Component like error, success, info, warn, Modular, grimace and other message type.
Usage for Angular 4 notification Component
Since alerts / notifications area unit used throughout the applying, thus its higher to outline it once in index.html so try and set/reset through part code. i’m additionally exploitation Behavior Subject object in commission, that is much a lot of impressive and higher then discernible in several cases, Behavior Subject may be a variety of subject, a theme may be a special variety of discernible thus you’ll take messages like several different discernible. In plain words once specific page is invoked, its ngOnit() methodology decision the alert service and pass the reference of alert worth to be load, then service set new worth into its Behavior Subject object(alertStatus), all variables(objAlert) throughout the applying signed to the current Behavior Subject object area unit then alerted and refresh their state with the new worth.
Installation for Angular 4 notification Popup Component
// for Angular 4 notification Popup Component $ npm install --save ng2-popup-notify
Usage for Angular 4 notification Popup Component
Configure your System.config for Angular 4 notification Popup Component
// for Angular 4 notification Popup Component
//Configure your System.config
System.config({
// default JSExtensions
defaultJSExtensions: true,
map: {
// angular core for core.umd.js
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
// angular rxjs
"rxjs": "node_modules/rxjs",
// set ng2-notify-popup
'ng2-notify-popup' : 'npm:ng2-notify-popup',
},
// set packages
packages: {
// set app
'app': {
// set main
main : './main.ts',
// set default JSExtensions
defaultJSExtensions : 'ts'
},
// set ng2-notify-popup
"ng2-notify-popup" : {
// set index.js
main:'./index.js',
// set index.js
defaultExtension : 'js'
}
}
});
and then from your Angular AppModule for Angular 4 notification Popup Component:
// import platform-browser for Angular 4 notification Popup Component
import { BrowserModule } from '@angular/platform-browser';
// import core
import { NgModule } from '@angular/core';
// import component
import { AppComponent } from './app.component';
// import web-animations-js
import 'web-animations-js';
// Import library for NgNotifyPopup
import { NgNotifyPopup } from 'ng2-notify-popup';
// call NgModule
@NgModule({
// set declarations
declarations: [
AppComponent
],
// set imports
imports: [
// set Browser Module
BrowserModule,
// imports NgNotifyPopup
NgNotifyPopup
],
// set providers
providers: [],
// set bootstrap for App Component
bootstrap: [AppComponent]
})
export class AppModule { }
Once your library is imported, you can use its Angular 4 Notification service
// for Angular 4 notification Popup Component
//You can now utilize this library administration to indicate popup anyplace in precise application
import { Component } from '@angular/core';
// import Notification Service
import { NotificationService } from 'ng2-notify-popup';
// set Component
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [NotificationService]
})
// set App Component
export class AppComponent {
// set constructor
constructor(private notify: NotificationService) { }
// set body append
show(text: string, type: string): void {
// set notify show
this.notify.show(text, { position:'top', duration:'2000', type: 'success' });
}
// set append for any componentother
showModular(text: string, type: string): void {
// set notify show
this.notify.show(text, { position:'top', duration:'2000', type: 'success', location: '#modular' });
}
}
Please share My Example Angular 4 notification Popup Component-display notification Popup using Angular 4