Home Angular6 Angular 6 Flash Messages

Angular 6 Flash Messages

by therichpost
Published: Last Updated on 8 comments
angular-flash-message-example

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 6 Flash Messages.

Here is the working image:

Angular 6 Flash Messages

 Angular provides us so many default features and Flash Message is one of them.

Here are the steps, you need to follow for Angular Flash Messages:

 

1. First, you need to run below command into your terminal to add Angular Flash Message Package into your Angular 6 App:
npm install angular2-flash-messages --save

 

2. After add below code into your app.module.ts file:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FlashMessagesModule } from 'angular2-flash-messages';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
  FlashMessagesModule.forRoot(),
  
  ],
  entryComponents: [AppComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

3. After this, you need to add below code into app.component.ts file:
import {Component} from '@angular/core';
import { FlashMessagesService } from 'angular2-flash-messages';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private flashMessage: FlashMessagesService) { }
  
  showFlash() {
        // 1st parameter is a flash message text
        // 2nd parameter is optional. You can pass object with options.
        this.flashMessage.show('Welcome To TheRichPost.com', { cssClass: 'alert-success', timeout: 2000 });
    }
}

 

4. After it, you need to add below code into your app.component.html file:
<div class="jumbotron text-center">
  <h1>Angular Flash Messages
</h1>
</div>
<button type="button" (click) = "showFlash()" class="btn btn-primary">Show Flash Messages</button>
<flash-messages></flash-messages><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

 Now you are done. If you have any query related to this post, then please ask questions or comment below.

You may also like

8 comments

davidw December 6, 2018 - 7:17 am

same for angular 7

Reply
Ajay Malhotra December 6, 2018 - 3:41 pm

yes..

Reply
raciel January 14, 2019 - 8:42 pm

how can I use the flash in other component but the is in the app.component template
Example:
showFlash() {
// 1st parameter is a flash message text
// 2nd parameter is optional. You can pass object with options.
this.flashMessage.show(‘Welcome To TheRichPost.com’, { cssClass: ‘alert-success’, timeout: 2000 });
}
in login.component
and in app.component.html

Reply
Ajay Malhotra January 15, 2019 - 2:52 pm

You can follow the same instruction in other component too.

Reply
sagar February 27, 2020 - 10:57 am

how to set close button on flash ?

Reply
Ajay Malhotra February 27, 2020 - 3:12 pm

We can add that.

Reply
raviraj September 14, 2020 - 3:34 pm

how to set multiple flash messages with different different places in same component

Reply
Ajay Malhotra September 14, 2020 - 3:48 pm

Yes you can with position attribute.
Thanks

Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.