Showing posts with label angular2-flash-messages. Show all posts
Showing posts with label angular2-flash-messages. Show all posts
angular2-flash-messages

angular2-flash-messages

October 18, 2017
This is a simple module that provides component and service for showing flash messages.

Requirements

NPM - Node package manager

Installation

  • run npm install angular2-flash-messages --save
  • import FlashMessagesModule in your app's main module app.module.ts, e.g.: 

 // other imports  
 // ...  
 import { FlashMessagesModule } from 'angular2-flash-messages';  
 // ...  
 @NgModule({  
   imports: [  
     // other imports  
     // ...  
     FlashMessagesModule,  
     // ...  
   ]  
 })  
That should be enough if you use Webpack to bundle JavaScript.
Otherwise you'll have to edit systemjs.config.js to set correct path, e.g.:
 // below you can see an example of map and packages sections in systemjs.config.js  
 System.config({  
   paths: {  
    // paths serve as alias  
    'npm:': 'node_modules/'  
   },  
   // map tells the System loader where to look for things  
   map: {  
     // other  
     'angular2-flash-messages':  'npm:angular2-flash-messages',  
     // other  
   },  
   // packages tells the System loader how to load when no filename and/or no extension  
   packages: {  
     // other  
     "angular2-flash-messages": {  
       main: 'index.js',  
       defaultExtension: 'js'  
     },  
     // other  
   }  
 });  

Usage

Place flash messages component selector in a template, for example in AppComponent:
 import { Component } from "@angular/core";  
 @Component({  
   selector: 'my-app',  
   template: `  
     <flash-messages></flash-messages>  
     <router-outlet></router-outlet>  
   `  
 })  
 export class AppComponent {}  
Import FlashMessagesService and show flash message in any component, e.g.:
 import { Component, OnInit } from '@angular/core';  
 import { FlashMessagesService } from 'angular2-flash-messages';  
 @Component({  
   template: `  
     <p>About Component</p>  
   `  
 })  
 export class AboutComponent implements OnInit {  
   constructor(private _flashMessagesService: FlashMessagesService) {}  
   ngOnInit() {  
     // 1st parameter is a flash message text  
     // 2nd parameter is optional. You can pass object with options.  
     this._flashMessagesService.show('We are in about component!', { cssClass: 'alert-success', timeout: 1000 });  
   }  
 }  
By default flash message is visible for 2.5 seconds and then deleted. You can pass second argument and specify for how long flash message should be visible, e.g.:
 // flash message will be visible for 1 second  
 this._flashMessagesService.show('We are in about component!', { timeout: 1000 });  
You can specify CSS class for flash message div-element, e.g.:
 // set CSS-class for wrapper div of flash message  
 this._flashMessagesService.show('We are in about component!', { cssClass: 'your-css-class' });  
You can show multiple flash messages, e.g.:
 this._flashMessagesService.show('Success!', { cssClass: 'alert-success' } );  
 this._flashMessagesService.show('Failure!', { cssClass: 'alert-danger' } );  
Also you can gray out everything except your flash messages, e.g.:
 this._flashMessagesService.grayOut(true); // turn on gray out feature  
 this._flashMessagesService.grayOut(false); // turn off gray out feature  
By default gray out is disabled.
Notice! You have to add some CSS to see gray out in action, e.g.:
 #grayOutDiv  
 {  
   background-color: #333;  
   opacity: 0.7;  
   position: fixed;  
   top: 0px;  
   left: 0px;  
   height: 100%;  
   width: 100%;  
   overflow: hidden;  
   z-index: 9999;  
 }  
 .flash-message  
 {  
   z-index: 10000;  
   position: relative;  
 }  

License

The repository code is open-sourced software licensed under the MIT license.
Note: Special thanks to Paul Moff
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.