ng-flash-messages
It is an angular2+ flash message library with bootstrap styling and native angular animation [Demo](https://ameerthehacker.github.io/ng-flash-messages-demo/).
Last updated 2 years ago by ameerthehacker .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ng-flash-messages 
SYNC missed versions from official npm registry.

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

Current Tags

  • 0.3.0                                ...           latest (2 years ago)

7 Versions

  • 0.3.0                                ...           2 years ago
  • 0.2.0                                ...           2 years ago
  • 0.1.4                                ...           3 years ago
  • 0.1.3                                ...           3 years ago
  • 0.1.2                                ...           3 years ago
  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 4
Last Day 0
Last Week 4
Last Month 1
Dependencies (0)
None
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |