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.
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