1 | # Angular 2 flash messages module
|
2 |
|
3 | [![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](http://opensource.org/licenses/MIT)
|
4 |
|
5 | This is a simple module that provides component and service for showing flash messages.
|
6 |
|
7 | ## Requirements
|
8 | - [NPM](https://npmjs.org/) - Node package manager
|
9 |
|
10 |
|
11 | ## Installation
|
12 |
|
13 | - run `npm install angular2-flash-messages --save`
|
14 | - import `FlashMessagesModule` in your app's main module `app.module.ts`, e.g.:
|
15 |
|
16 | ```
|
17 | // other imports
|
18 | // ...
|
19 | import { FlashMessagesModule } from 'angular2-flash-messages';
|
20 | // ...
|
21 |
|
22 | @NgModule({
|
23 | imports: [
|
24 | // other imports
|
25 | // ...
|
26 | FlashMessagesModule.forRoot(),
|
27 | // ...
|
28 | ]
|
29 | })
|
30 |
|
31 | ```
|
32 |
|
33 | Notice! You have to import flash messages module via `FlashMessagesModule.forRoot()`
|
34 |
|
35 | That should be enough if you use Webpack to bundle JavaScript.
|
36 |
|
37 | Otherwise you'll have to edit `systemjs.config.js` to set correct path, e.g.:
|
38 |
|
39 | ```
|
40 | // below you can see an example of map and packages sections in systemjs.config.js
|
41 |
|
42 | System.config({
|
43 | paths: {
|
44 | // paths serve as alias
|
45 | 'npm:': 'node_modules/'
|
46 | },
|
47 | // map tells the System loader where to look for things
|
48 | map: {
|
49 | // other
|
50 | 'angular2-flash-messages': 'npm:angular2-flash-messages',
|
51 | // other
|
52 | },
|
53 | // packages tells the System loader how to load when no filename and/or no extension
|
54 | packages: {
|
55 | // other
|
56 | "angular2-flash-messages": {
|
57 | main: 'module/module.js',
|
58 | defaultExtension: 'js'
|
59 | },
|
60 | // other
|
61 | }
|
62 | });
|
63 | ```
|
64 |
|
65 | ## Usage
|
66 |
|
67 | Place flash messages component selector in a template, for example in `AppComponent`:
|
68 |
|
69 | ```
|
70 | import { Component } from "@angular/core";
|
71 |
|
72 | @Component({
|
73 | selector: 'my-app',
|
74 | template: `
|
75 | <flash-messages></flash-messages>
|
76 | <router-outlet></router-outlet>
|
77 | `
|
78 | })
|
79 | export class AppComponent {}
|
80 | ```
|
81 |
|
82 | Import FlashMessagesService and show flash message in any component, e.g.:
|
83 |
|
84 | ```
|
85 | import { Component, OnInit } from '@angular/core';
|
86 | import { FlashMessagesService } from 'angular2-flash-messages';
|
87 |
|
88 | @Component({
|
89 | template: `
|
90 | <p>About Component</p>
|
91 | `
|
92 | })
|
93 | export class AboutComponent implements OnInit {
|
94 | constructor(private _flashMessagesService: FlashMessagesService) {}
|
95 |
|
96 | ngOnInit() {
|
97 | // 1st parameter is a flash message text
|
98 | // 2nd parameter is optional. You can pass object with options.
|
99 | this._flashMessagesService.show('We are in about component!', { cssClass: 'alert-success', timeout: 1000 });
|
100 | }
|
101 | }
|
102 |
|
103 | ```
|
104 |
|
105 | 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.:
|
106 |
|
107 | ```
|
108 | // flash message will be visible for 1 second
|
109 | this._flashMessagesService.show('We are in about component!', { timeout: 1000 });
|
110 |
|
111 | ```
|
112 |
|
113 | You can specify CSS class for flash message div-element, e.g.:
|
114 |
|
115 | ```
|
116 | // set CSS-class for wrapper div of flash message
|
117 | this._flashMessagesService.show('We are in about component!', { cssClass: 'your-css-class' });
|
118 |
|
119 | ```
|
120 |
|
121 | You can show multiple flash messages, e.g.:
|
122 |
|
123 | ```
|
124 | this._flashMessagesService.show('Success!', { cssClass: 'alert-success' } );
|
125 | this._flashMessagesService.show('Failure!', { cssClass: 'alert-danger' } );
|
126 |
|
127 | ```
|
128 |
|
129 | Also you can gray out everything except your flash messages, e.g.:
|
130 |
|
131 | ```
|
132 | this._flashMessagesService.grayOut(true); // turn on gray out feature
|
133 | this._flashMessagesService.grayOut(false); // turn off gray out feature
|
134 |
|
135 | ```
|
136 |
|
137 | By default gray out is disabled.
|
138 |
|
139 | Notice! You have to add some CSS to see gray out in action, e.g.:
|
140 | ```
|
141 | #grayOutDiv
|
142 | {
|
143 | background-color: #333;
|
144 | opacity: 0.7;
|
145 | position: fixed;
|
146 | top: 0px;
|
147 | left: 0px;
|
148 | height: 100%;
|
149 | width: 100%;
|
150 | overflow: hidden;
|
151 | z-index: 9999;
|
152 | }
|
153 |
|
154 | .flash-message
|
155 | {
|
156 | z-index: 10000;
|
157 | position: relative;
|
158 | }
|
159 |
|
160 | ```
|
161 |
|
162 | ## Feedback
|
163 |
|
164 | Please [leave your feedback](https://github.com/moff/angular2-flash-messages/issues) if you have noticed any issues or have a feature request.
|
165 |
|
166 | ## License
|
167 |
|
168 | The repository code is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).
|