Angular 4 Notify Popup Component-display Notify Popup Using Angular 4

Angular 4 Notify Popup Component-display Notify Popup using Angular 4

In this post we will show you how to show Angular 4 Notify Popup Component or display Notify Popup using Angular 4, hear we will give you demo for Angular 4 Notify 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.

Usage for Angular 4 Notify Popup 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 BehaviorSubject 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 BehaviorSubject object(alertStatus), all variables(objAlert) throughout the applying signed to the current BehaviorSubject object area unit then alerted and refresh their state with the new worth.

Installation for Angular 4 Notify Popup Component

// for Angular 4 Notify Popup Component
$ npm install --save ng2-popup-notify

Usage for Angular 4 Notify Popup Component

Configure your System.config for Angular 4 Notify Popup Component

// for Angular 4 Notify 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 Notify Popup Component:

// import platform-browser for Angular 4 Notify 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 Notification service

// for Angular 4 Notify 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' });
}
}

You also like Angular Gauge chart and Angularjs Image Gallery and Angularjs pie chart and Angular Bind Checkboxes list to a unique ng-model Array and Angular 4 gauge chart