ngx-flash-messages
Version:
Flash messages/notifications for Angular 2+
81 lines (62 loc) • 2.87 kB
Markdown
[](https://www.npmjs.com/package/ngx-flash-messages)
[](https://travis-ci.org/MapleSyrupGroup/ngx-flash-messages)
[](https://codecov.io/gh/MapleSyrupGroup/ngx-flash-messages)
[](https://github.com/semantic-release/semantic-release)
[](http://commitizen.github.io/cz-cli/)
[](https://greenkeeper.io/)
# ngx-flash-messages
Flash messages for Angular 2+ [Demo](https://maplesyrupgroup.github.io/ngx-flash-messages/)
# Usage
Add the library to your dependencies
```shell
npm install --save ngx-flash-messages
```
Import the `FlashMessagesModule` into your main module
```ts
// app.module.ts
import { FlashMessagesModule } from 'ngx-flash-messages';
@NgModule({
imports: [
// ...
FlashMessagesModule,
]
})
// ...
```
To display a new flash message we need to make use of the `FlashMessagesService` by importing it, adding it into the component's (or service) dependency injection and using the `show()` method
```ts
// my-component.component.ts
import { Component, OnInit } from '@angular/core';
import { FlashMessagesService } from 'ngx-flash-messages';
@Component({
selector: 'my-component',
template: '<h1>My Component</h1>',
})
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('My component has initialized!', {
classes: ['alert', 'alert-warning'], // You can pass as many classes as you need
timeout: 1000, // Default is 3000
});
}
}
```
Then you just need to decide where to render your messages (Typically at the top of your page)
```html
<!-- app.component.html -->
<div class="app-container">
<!-- This is where your flash messages will be displayed -->
<ngx-flash-messages></ngx-flash-messages>
<!--
...
Your code
...
-->
</div>
```
The library is css independant, so you're free of using whichever css framework or library of your choosing, or your own css, the [Demo](https://maplesyrupgroup.github.io/ngx-flash-messages/) and the usage guide both use bootstrap classes just as a sample.
# License
The repository code is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).