title: Creating a push notification on receiving chat
body: <p>I am fairly new to angular 2 and Firebase but i managed to create a chat app <a href="https://github.com/pujan1/temp" rel="nofollow noreferrer">here</a> and my end goal is to create a push notification when there is a new message in the chat app. </p>
  
  <ol>
  <li><p>I tried installing <a href="https://github.com/flauc/angular2-notifications/blob/master/docs/pushNotifications.md" rel="nofollow noreferrer">this</a> but it is very difficult as i couldn't understand the document.</p></li>
  <li><p>I tried the solution from <a href="https://stackoverflow.com/questions/2271156/chrome-desktop-notification-example">this thread</a> as well. but the app wont detect the Notification. </p></li>
  </ol>
  
  <p>Any help on how to approach this right?</p>
  
  <p>this is my app.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { AngularFire, AuthProviders, AuthMethods, FirebaseListObservable } from 'angularfire2';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
   export class AppComponent {
    items: FirebaseListObservable&lt;any&gt;;
    name: any;
    msgVal: string = '';
  
      constructor(public af: AngularFire) {
          this.items = af.database.list('/messages', {
            query: {
              limitToLast: 5
            }
          });
  
          this.af.auth.subscribe(auth =&gt; { 
            if(auth) {
              this.name = auth;
            }
          });
      }
  
  login() {
      this.af.auth.login({
        provider: AuthProviders.Facebook,
        method: AuthMethods.Popup,
      });
     }
  
  chatSend(theirMessage: string) {
        this.items.push({ message: theirMessage, name: this.name.facebook.displayName});
        this.msgVal = '';
    }
  
  mychange(){
     console.log("change happned"); // updated value
    }
   }
  </code></pre>
  
  <p>and my app.module file contains, </p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import { AppComponent } from './app.component';
  import { AngularFireModule} from 'angularfire2';
  import {initializeApp,database} from 'firebase';
  
  export const firebaseConfig = {
     apiKey: "AIzaSyAQUetWt-pH-WuMTZ-lonP2ykICOl4KiPw",
     authDomain: "anguchat-eb370.firebaseapp.com",
     databaseURL: "https://anguchat-eb370.firebaseio.com",
     storageBucket: "anguchat-eb370.appspot.com",
     messagingSenderId: "267732203493"
  };
  
  initializeApp(firebaseConfig);
  database().ref().on('value', function(snapshot){
    var x = snapshot.val()
    console.log("This prints whenever there is a new message");
  });
  
  @NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      AngularFireModule.initializeApp(firebaseConfig)
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>