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">×</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 *