Angular 7 Flash Messages

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

Angular 7 Has lots of new features and I will share this all. I have shown very simple example and everyone can understand this.

Here is the working image:

 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 7 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:

On button click event, flash message will be shown:

<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.

Thank you,

Jatt,

TheRichPost