Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

ng-flash-messages

0.3.0 • Public • Published

NgFlashMessages

It is an angular2+ flash message library with bootstrap styling and native angular animation Demo.

Demo Gif

Installation

To install this library, run:

$ npm install ng-flash-messages --save

Importing the necessary module

Once you have installed the library with npm, you can import the library in your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
 
// Import the library
import { NgFlashMessagesModule } from 'ng-flash-messages';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
 
    // Specify the library as an import
    NgFlashMessagesModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once the library is imported, you can use ng-flash-message components anywhere in the app:

<h1>
  {{ title }}
</h1>
<ng-flash-message></ng-flash-message>

Showing the flash message

In any of your component inject the NgFlashMessageService:

import { Component, OnInit } from '@angular/core';
 
import { NgFlashMessageService } from 'ng-flash-messages';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
 
  constructor(private ngFlashMessageService: NgFlashMessageService) {
  }
  ngOnInit() {}
}

Then call the showFlashMessage method in the service to show the flash message:

import { Component, OnInit } from '@angular/core';
 
import { NgFlashMessageService } from 'ng-flash-messages';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
 
  constructor(private ngFlashMessageService: NgFlashMessageService) {
  }
  ngOnInit() {
    this.ngFlashMessageService.showFlashMessage({
      // Array of messages each will be displayed in new line
      messages: ["Yah! i'm alive"], 
      // Whether the flash can be dismissed by the user defaults to false
      dismissible: true, 
      // Time after which the flash disappears defaults to 2000ms
      timeout: false,
      // Type of flash message, it defaults to info and success, warning, danger types can also be used
      type: 'danger'
    });
  }
}

License

MIT © Ameer Jhan

Install

npm i ng-flash-messages

DownloadsWeekly Downloads

604

Version

0.3.0

License

MIT

Unpacked Size

22.3 kB

Total Files

10

Last publish

Collaborators

  • avatar