Friday, December 1, 2017

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.

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

Here I am conditionally adding class, you can read more about adding class conditionally using Angular here.

We are done. In this article we have discussed about creating a simple flash message component using Angular.

Angular 4Flash messagengOnChanges

Related Info

1. Http calls in Angular with simple examples.

2. Disable submit button until all mandatory fields are filled - Angular

3. Angular client side pagination.

4. Angular show more/less pagination

No comments :

Post a Comment