Angular 4 notification Popup Component-display notification Popup using Angular 4

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.

Read More Demo Download

By usinbg this modul we can show different stype 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 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 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' });
  }
} 

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