Angular RxJs alert demo

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <script type="text/javascript" charset="utf-8">
      window.AngularVersionForThisPlunker = 'latest'
    </script>
    <title>angular playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

/* Styles go here */

.alert-container {
  position: absolute;
  right: 0;
  top: 0;
  width: 25%;
  
}

var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
  angularVersion = '@5.0.4'; //picks up latest
}
else {
  angularVersion = '@' + window.AngularVersionForThisPlunker;
}

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    '@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
    '@angular/common/http': 'npm:@angular/common' + angularVersion + '/bundles/common-http.umd.js',
    '@angular/compiler': 'npm:@angular/compiler' + angularVersion  + '/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
    '@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
    '@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
    'tslib': 'npm:tslib@1.6.1',
    'rxjs': 'npm:rxjs@5.5.2',
    'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

//our root app component
import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { FormsModule, NgForm } from '@angular/forms';
import { AlertComponent } from './alert.component';
import { AlertFormComponent } from './alertForm.component';
import { AlertService } from './alert.service';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'my-app',
  template: `
    <div class="container">
      <h2>AlertComponent Demo</h2>
    </div>
    <alert>
    </alert>
    <div class=col-6>
      <alert-form></alert-form>
    </div>
  `,
})
export class App {}

@NgModule({
  imports: [ 
    BrowserModule,
    FormsModule,
    CommonModule
  ],
  declarations: [ 
    App,
    AlertComponent,
    AlertFormComponent
  ],
  providers: [
    AlertService
    ],
  bootstrap: [ App ]
})
export class AppModule {}

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

@Component({
  selector: 'alert',
  template: `
    <div class="alert-container">
      <div *ngFor="let alert of alerts" [class]="'alert alert-'+alert.type">
      <p>{{alert.timestamp | date:'HH:mm:ss'}}</p>
      <p>{{alert.text}}</p>
      </div>
    </div>
  `,
})
export class AlertComponent {
  public alerts: Alert[] = new Array<Alert>();
  
  constructor(private alertService: AlertService) {
      alertService.onNewAlert.subscribe(alert => {
        this.alerts.push(alert)
      });
  
    alertService.onAlertRemove.subscribe((alert) => {
      this.alerts = this.alerts.filter(x => x !== alert);
      });
  }
}

import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import 'rxjs/add/observable/timer';
import 'rxjs/add/operator/do';

@Injectable()
export class AlertService {
  
  public onNewAlert: Subject<Alert> = new Subject<Alert>();
  public onAlertRemove: Subject<Alert> = new Subject<Alert>();
  constructor() {}
  
  public createAlert(text: string, duration: number, type: string): void {
    const alert: Alert = {
        text: text,
        type: type,
        timestamp: new Date();
      };
    this.onNewAlert.next(alert);
    Observable.timer(duration * 1000)
      .do(() => console.log("removing alert", alert))
      .subscribe(() => {
      this.onAlertRemove.next(alert);
    })
  }
}
      
export interface Alert {
  text: string;
  type: string;
  timestamp: Date;
}

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

@Component({
  selector: 'alert-form',
  template: `
  <form class="mt-5" #form="ngForm" (ngSubmit)="createAlert(form)">
  <div class="form-group">
    <label class="col-form-label" for="alert-text">Alert Text: </label>
    <input class="form-control" type="text" ngModel name="alertText" placeholder="Enter Alert-text here" required>
  </div>
  <div class="form-group">
    <label class="col-form-label" for="alert-text">Alert Duration (seconds) </label>
    <input class="form-control" type="number" ngModel name="duration" placeholder="Duration the Alert shall be shown" required>
  </div>
  <div class="form-group">
    <label class="col-form-label mr-3" for="type">Alert Type: </label>
    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-success" [class.active]="form.value.type === 'success'">
        <input type="radio" ngModel name="type" value="success" id="success" autocomplete="off" required checked> Success
      </label>
      <label class="btn btn-danger" [class.active]="form.value.type === 'danger'">
        <input type="radio" ngModel name="type" value="danger" id="danger" autocomplete="off" required> Danger
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit" [disabled]="form.invalid">Create Alert</button>
  </form>
  `,
})
export class AlertFormComponent {
  
    constructor(private alertService: AlertService) { }
  
    public createAlert(form: NgForm): void {
      this.alertService.createAlert(form.value.alertText, form.value.duration, form.value.type);
      form.reset();
    }
}