alert.ts

export class Alert {
    readonly message: string;
    readonly type: 'success' | 'error' | 'secondary' | 'warning' | 'alert';
    readonly timeout: number;

    constructor(message: string,
                type: 'success' | 'error' | 'secondary' | 'warning' | 'alert',
                timeout?: number) {
        this.message = message;
        this.type = type;
        this.timeout = timeout || 10000;
    }

    equal(alert: Alert): boolean {
        return this.message == alert.message && this.type == alert.type && this.timeout == alert.timeout;
    }
}

alerts.component.html

<div class="row">
  <alert *ngFor="let alert of alerts | async" [alert]="alert" (closed)="remove(alert)"></alert>
</div>

alerts.component.ts

import { Component, OnInit } from "@angular/core";
import { ReplaySubject } from "rxjs/ReplaySubject";
import { Alert } from "./alert";
import { AlertsService } from "./alerts.service";

@Component({
    moduleId: module.id,
    selector: 'alerts',
    templateUrl: 'alerts.component.html'
})
export class AlertsComponent implements OnInit {
    private alerts: ReplaySubject<Array<Alert>>;

    constructor(private service: AlertsService) { }

    remove(alert: Alert) {
        this.service.remove(alert);
    }

    ngOnInit(): void {
        this.alerts = this.service.observable();
    }
}

alerts.service.ts

import { Router } from '@angular/router';
import { Injectable } from '@angular/core';
import { ReplaySubject } from 'rxjs/ReplaySubject';
import { Alert } from './alert';


@Injectable()
export class AlertsService {
    private alerts: Array<Alert> = [];
    private alertsSubject = new ReplaySubject<Array<Alert>>();

    constructor(router: Router) {
        router.events.subscribe(() => this.clean());
    }

    observable(): ReplaySubject<Array<Alert>> {
        return this.alertsSubject;
    }

    error(message: string, timeout?: number) {
        this.add(new Alert(message, 'error', timeout));
    }

    success(message: string, timeout?: number) {
        this.add(new Alert(message, 'success', timeout));
    }

    warning(message: string, timeout?: number) {
        this.add(new Alert(message, 'warning', timeout));
    }

    secondary(message: string, timeout?: number) {
        this.add(new Alert(message, 'secondary', timeout));
    }

    alert(message: string, timeout?: number) {
        this.add(new Alert(message, 'alert', timeout));
    }

    remove(alert: Alert) {
        this.alerts = this.alerts.filter((item: Alert) => !alert.equal(item));
        this.next();
    }

    clean() {
        this.alerts.length = 0;
        this.next();
    }

    private next() {
        this.alertsSubject.next(this.alerts);
        document.body.scrollTop = 0;
    }

    private add(alert: Alert) {
        this.alerts = this.alerts.filter((item: Alert) => !alert.equal(item));
        this.alerts.unshift(alert);
        this.next();
    }
}