title: Alert Service in angular 2
body: <p>Below is how i am implementing alert services in my tutorial application but it is not working. What could be the problem please? None of the alert messages both on the login page and the registration page is working</p>
  
  <p><strong>login component</strong></p>
  
  <pre><code>login(){
      this.authenticateLoginService.login(this.login.email, this.login.password)
         .subscribe(data =&gt; {
            this.redirectToLoginPage();
         },
         error =&gt; {
            this.alertService.error('Invalid Username or Password');
            this.loading = false;
          });
  }
  </code></pre>
  
  <p><strong>registration page</strong></p>
  
  <pre><code>Register(){
     this.httpService.createUser(this.module)
        .subscribe(data =&gt; {
           this.alertService.success('Registration Successful', true);
           this.redirectToLoginPage()
           console.log(data);
         },
         error =&gt;{
           this.alertService.error(error);
         });
  }
  </code></pre>
  
  <p><strong>alert service</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Router, NavigationStart } from '@angular/router';
  import { Observable } from 'rxjs';
  import { Subject } from 'rxjs/Subject';
  
  @Injectable()
  export class AlertService {
      private subject = new Subject&lt;any&gt;();
      private keepAfterNavigationChange = false;
  
      constructor(private router: Router) {
         // clear alert message on route change
         router.events.subscribe(event =&gt; {
         if (event instanceof NavigationStart) {
            if (this.keepAfterNavigationChange) {
                // only keep for a single location change
                this.keepAfterNavigationChange = false;
            } else {
                // clear alert
                this.subject.next();
            }
         }
     });
     }
  
     success(message: string, keepAfterNavigationChange = false) {
         this.keepAfterNavigationChange = keepAfterNavigationChange;
         this.subject.next({ type: 'success', text: message });
     }
  
     error(message: string, keepAfterNavigationChange = false) {
          this.keepAfterNavigationChange = keepAfterNavigationChange;
          this.subject.next({ type: 'error', text: message });
     }
  
     getMessage(): Observable&lt;any&gt; {
          return this.subject.asObservable();
     }
   }
  </code></pre>
  
  <p><strong>alert.ts</strong></p>
  
  <pre><code> import { Component, OnInit } from '@angular/core';
   import { AlertService } from '../Services/alert_services';
  
   @Component({
      selector: 'alert',
      templateUrl: 'alert.html'
   })
  
   export class AlertComponent {
     message: any;
  
     constructor(private alertService: AlertService) { }
  
     ngOnInit() {
        this.alertService.getMessage().subscribe(message =&gt; { this.message = message; });
     }
   }
  </code></pre>
  
  <p><strong>alert.html</strong></p>
  
  <pre><code> &lt;div *ngIf="message" [ngClass]="{ 'alert': message, 'alert-success': message.type === 'success', 'alert-danger': message.type === 'error' }"&gt;{{message.text}}&lt;/div&gt;
  </code></pre>