Reusable flashy message using Angular

AngularFlash MessageNon related componentBehaviorSubject

We are going to create a simple flash message that can be accessed by anywhere in the application. One of the use case will be, suppose we have many forms in our application and after submitting the forms we need to show a simple success message to the user. For those scenarios we can use this example. Success message will stay for some seconds and it will fade out. However you can control this effect as well. You can place this flashMessageComponent in your header so that it will be visible even after navigating to other pages as well. Let us check with an example.

Create a simple flashMessageComponent first.

Reusable flashy message using Angular

---

flashMessageComponent

import { Component, OnInit } from '@angular/core';
import { commonService } from '../services/commonService';

@Component({
    selector: 'flash-message',
    template: '<div class="flashMessage animateCss" [ngClass]="{\'showFlashmessage\': showMessage}" [hidden]="!showMessage">'
        + '<span>{{message}}</span>'
        + '</div>'
})

export class flashMessageComponent {
    showMessage: boolean;
    message: string;
    constructor(private _commonService: commonService) {
        this.showMessage = false;
    }

    ngOnInit() {
        this._commonService.currentMessage.subscribe(msg => this.updateMessage(msg))
    }

    updateMessage(msg: string) {
        if (msg && msg != '' && msg != null) {
            this.message = msg;
            this.showMessage = true;

            setTimeout(() => {
                this.showMessage = false;
                this.message = '';
            }, 3000);
        }

    }
}

We are done with flashMessageComponent. Place this <flash-message></flash-message> in your header (or where ever you feel it would be better to fit) so that user can see the message at top middle of the page. Here I have imported OnInit, basically here (ngOnInit) we will be getting the notification for latest message update. UpdateMessage is the method which will handle the message and pass to our html. In the html I have used ngClass to add or remove classes and hidden property of angular to show and hide. Next create a simple service file, in this case it is commonService.

Service (commonService.ts)

Let us check the code first.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';


@Injectable()
export class commonService {

    private message = new BehaviorSubject('');
    currentMessage = this.message.asObservable()

    constructor() { }

    updateFlashMessage(message: string) {
        this.message.next(message);
    }

}

Here we have used Angular BehaviorSubject and setting the data asObservable. From any component you can call this updateFlashMessage method by importing commonService file and also you can pass message along with that, this will be get updated in flashMessageComponent and the result will be a beautiful flashy message. Now let us check the code of the component where we will be calling this method.

Component

import { Component } from '@angular/core';
import { commonService } from '../../services/commonService';

@Component({
    selector: 'my-component',
    template: '<div>'
        + '<button class="btn" (click)="showMessage()">Show message</button>'
        + '</div>'
})

export class MyComponentOne {
    constructor(private _commonService: commonService) { }
    showMessage() {
        this._commonService.updateFlashMessage('I am a flash message');
    }
}

Import commonService and update the message. Basically you can invoke the flashy message from any component by adding the simple code mentioned above. Here I have used one of the component communication method to achieve above functionality. I suggest you to read about 7 method to communicate between angular components as well.

Below are the css which I have used to build this flash component, you can make it better by updating with your own css.

CSS

.flashMessage{
    position: absolute;
    top: 12px;
    left: 50%; 
    width: 350px;
    z-index: 1000000;
    pointer-events: none;
    background: #058405;
    text-align: center;
    padding: 5px 3px;
    border-radius: 5px;
    color: #fff;
    font-size:14px;
}
.animateCss{
    -webkit-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
    -moz-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
    -ms-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out ;
    -o-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
    transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
    opacity: 0;
}
.showFlashmessage{
    opacity: 2;
}

If you don’t want to create a global flash message, you can check this link: - Flash messages for related components.

We are done. In this article we have created a simple flash message which can be accessed from any component easily.

Angular 2+Angular 4/5Flash MessageNon related componentBehaviorSubject

Related Info

1. Http calls in Angular with simple examples.

2. 5 different ways for conditionally adding class - Angular.

3. Angular 2/4 routing with simple examples.