Make It Easy: Flash messages using Angular.

Angular 4Flash messagengOnChanges

In this article we are going to discuss about creating a simple flash message using Angular component. Which can reuse very easily. It can be used for showing messages like "Success fully created" or showing any messages after successful of any action. For example you can use this for showing a message after submitting the form. Advantage of using this is that you can even quickly navigate to other pages but flash messages still can be visible. Flash message looks like below image. You can alter the style for your needs.

This flash message can be accessible between related components only. If you are looking for a global flash message that can be accessed from any component, then visit this links: Reusable flash component.

Flash message using Angular component

Below one is the simple html that you can add where ever you want flash message.


<flash-message [message]='successMessage'></flash-message>

Flash message component


import { Component, Input, SimpleChanges } from '@angular/core';

@Component({
    selector: 'flash-message',
    template: '<div class="flashMessage animateCss" [ngClass]="{\'showFlashmessage\': showMessage}" [hidden]="!showMessage">'
        + '<span>{{message}}</span>'
        + '</div>',
    styleUrls: ['./app.component.css']
})
export class FlashMessageComponent {
    @Input() message: string;
    showMessage: boolean;

    constructor() {
        this.showMessage = false;
    }

    ngOnChanges(changes: SimpleChanges) {
        this.manageMessage(changes.message.currentValue);

        console.log(changes.message.currentValue);// current selected value
        console.log(changes.message.previousValue);// previous selected value
    }
    manageMessage(message: string) {
        if (message && message.length > 0) {
            this.message = message;
            this.showMessage = true;

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

}

Here I have used ngOnChanges to watch any changes on @input. Using this you can easily check previous value and current value. Here changes.message.currentValue indicates current value and changes.message.previousValue for previous value. Don’t forget to import SimpleChanges from @angular/core. You can use @Input() set instead of ngOnChanges as well. By using ngOnChanges you can get all the inputs and also you can compare both previous and current value. If you are dealing with only one input you can use setter method. Here I have used @Input for getting the data from other component. Check this link to know more about sharing data between components and also by using service files.

Now let us check our component, here we will be setting the messages.


import { Component } from '@angular/core';
import { FlashMessageComponent } from './flashMessageComponent';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  successMessage: string;
  
  constructor() { }
  
  showFlashMessage() {
    this.successMessage = "Successfully updated.";
  }
}

Flash message will show whenever successMessage has new/old value. Flash message will be visible up to 3 seconds, you can increase or decrease this time in setTimeout option.

Below is the css which used for this flash div, you can alter this for your needs.

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;
}