Angular Alert Service

Angular Alert Service

This Angular service is used to display alerts on the screen in a floating box. The alerts are based on Bootstrap version 3.3.7 and are styled as info, success, warning, or error. Bootstrap is required.

Place the app-alert tags in your main page. Then, to add alert messages, use the AlertService in your component, like the example below.

import { Component, OnInit } from '@angular/core';
import { AlertService } from './modules/alert/alert.service';

@Component({
  templateUrl: './testalert.component.html',
  providers: [
    AlertService
  ]
})

export class TestAlertComponent implements OnInit {

  constructor(
    private alertService: AlertService
  ) { }

  ngOnInit() {
    this.alertService.add(AlertType.success, 'This is your alert message!');
  }
}

Alert Service Code

Here is the code for the service itself. Please enjoy!

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AlertComponent } from './alert.component';
import { AlertBodyComponent } from './alert-body.component';
import { AlertService } from './alert.service';

@NgModule({
  declarations: [
    AlertBodyComponent,
    AlertComponent
  ],
  imports: [
    CommonModule,
    BrowserAnimationsModule
  ],
  exports: [
    AlertBodyComponent,
    AlertComponent
  ],
  providers: [
    AlertService
  ]
})

export class AlertModule { }
export enum AlertType {
  info = 0,
  success = 1,
  warning = 2,
  error = 3
}
import { AlertType } from './alert.enum';

export class Alert {
  type: AlertType;
  message: string;
}
import { Injectable } from '@angular/core';
import { Alert } from './alert';
import { isUndefined } from 'util';
import { AlertType } from './alert.enum';

@Injectable()
export class AlertService {

  public static Alerts = new Array<Alert>();

  public add(type: AlertType, message: string): void {

    this.clear();

    const alert = new Alert();
    alert.type = type;
    alert.message = message;

    AlertService.Alerts.push(alert);
  }

  public close(alert: Alert): void {
    this.closeIdx(AlertService.Alerts.indexOf(alert));
  }

  private closeIdx(index): void {
    AlertService.Alerts.splice(index, 1);
  }

  public clear(): void {
    if (!isUndefined(AlertService.Alerts)) {
      AlertService.Alerts.forEach(alert => {
        this.close(alert);
      });
    }
  }
}
import {
  Component
} from '@angular/core';
import { AlertService } from './alert.service';

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

export class AlertComponent {
  alerts = AlertService.Alerts;
}
<app-alert-body
  class="alerts"
  *ngFor="let alert of alerts"
  message="{{alert.message}}"
  type="{{alert.type}}">
</app-alert-body>
import {
  Component,
  Input
} from '@angular/core';
import { AlertType } from './alert.enum';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-alert-body',
  templateUrl: './alert-body.component.html',
  animations: [
    trigger('hideAlert', [
      state('false', style({ opacity: 1 })),
      state('true', style({ opacity: 0 })),
      transition('false => true', animate('.5s'))
    ])
  ]
})

export class AlertBodyComponent {

  private _message: string;
  hideAlert = false;
  bootstrapStyle: string;

  @Input()
  get message(): string {
    return this._message;
  }
  set message(value: string) {
    this._message = value;
    this.hideAlert = false;
    setTimeout(() => {
      this.hideAlertAnimator();
    }, 5000);
  }
  @Input()
  set type(value: AlertType) {
    switch (+value) {
      case AlertType.success:
        this.bootstrapStyle = 'success';
        break;
      case AlertType.warning:
        this.bootstrapStyle = 'warning';
        break;
      case AlertType.error:
        this.bootstrapStyle = 'danger';
        break;
      default:
        this.bootstrapStyle = 'info';
        break;
    }
  }

  hideAlertAnimator() {
    if (this.hideAlert === false) {
      this.hideAlert = true;
    }
  }

  close() {
    this.hideAlertAnimator();
  }
}
<div role="alert"
    class="alert alert-dismissable
    {{'alert-' + bootstrapStyle}}" [@hideAlert]="hideAlert">
  <button type="button" class="close" (click)="close()">
    <span aria-hidden="true">&times;</span>
  </button>
  <div class="alerts-msg">{{message}}</div>
</div>
.alerts {
  position: fixed;
  width: 90%;
  max-width: 400px;
  right: 25px;
  top: 125px;
  z-index: 20000;
  overflow-x: auto;
}

.alerts-msg {
  padding: 15px;
  white-space: pre-wrap;
}
Categories: CategoriesAngular Software Development

About Chris

Chris Pounds is a software engineer, entrepreneur, and tech junky. He holds a Bachelor of Science in Information Technology from Western Governors University.

Leave a comment

Your email address will not be published. Required fields are marked *