Create a simple Messageboard with Firebase and Angular4

You want that your users can leave messages in your Angular Application. In this Article I explain how you can implement this with Angular 4 and Firebase.


First we have to import the Moduls for Firebase in our app.module.ts and our component.

app.module.ts

import { AngularFireModule } from 'angularfire2';

import { AngularFireDatabaseModule, AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    FormsModule,

    HttpModule,

    AngularFireModule.initializeApp(firebaseConfig),

    AngularFireDatabaseModule,

We also have to configure the AngularFireModule.

export const firebaseConfig = {

  apiKey: "",

    authDomain: "",

    databaseURL: "",

    projectId: "",

    storageBucket: "",

    messagingSenderId: ""

};

You get this information at your Firebase console.

component:

import { AngularFireDatabaseModule, AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

import * as firebase from 'firebase/app';

Then we declare a variable in which we save the input and this variable get pushed to Firebase. These item variable is from type FireBaseListObservable We also need a message variable.

items: FirebaseListObservable<any[]>

message: any

Now we write our function. In my case I push a message and the name from the user to the Firebase Database. I am getting the name from the social login. You can read in my previous article, how you can set up the social login in your Angular application.

chatSend(theirMessage: string) {

      this.items.push({ message: theirMessage, name: this.afAuth.auth.currentUser.displayName});

      this.message = "";

  }

If we done this it’s time to write some HTML. 

<div  *ngIf="(user | async)?.uid">

<input type="text" id="message"  placeholder="Chat here..." (keyup.enter)="chatSend($event.target.value)" [(ngModel)]="message" >

    <div *ngFor="let item of items | async">

      <a href="#">{{item.name}}</a>

      

      <p>{{item.message}}</p>

    </div> 

</div>

I don’t show the message board if the user is not logged in. 

*ngIf="(user | async)?.uid"

If the user is logged in, the user can write a message and send it via enter. I am using keyup.enter to call our chatSend function.

<input type="text" id="message"  placeholder="Chat here..." (keyup.enter)="chatSend($event.target.value)" [(ngModel)]="message" >

Below our input line I show all messages with the users displayname. Don’t forget using async, when you are working with Firebase.

<div *ngFor="let item of items | async">

      <a href="#">{{item.name}}</a>    

      <p>{{item.message}}</p>

    </div> 

That’s it!