Skip to main content

Create a simple Messageboard with Firebase and Angular4

Von


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!


Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

Download a file with Angular2+ and FileSaver.js

Von
Why should your Angular code download a file? Of course your webserver can deliver files and you can just add a simple link to your website but what if the file is delivered by a webservice and the webservice requests authentication (i.e. OAuth) to protect the file from unauthorized access? In this case you might have the requirement to download the file in your code and then tell the browser to save it to the hard disk. How to do that?   First of all you need to add filesaver.js to your project.  npm install file-saver --save ..and add the typings npm install @types/file-saver --save-dev More information about filesaver you can find on the filesaver github pages . To download the file via http you need to implement a service. The following imports are required: import  {  Injectable  }  from   '@angular/core' ; import  {  Http ,  Response ,  RequestOptions ,  ResponseContentType  }  from   ...
Post a Comment
Read more

Nested Component - Passing Data to a Parent Component

Von
In my previous article  Nested Component - Passing Data to a Child Component , I explained how to pass data from a parent component to a child component.  In this article I will describe how you do the other way, passing data from a child to a parent component. As you know, there is a decorator called @Input for passing data to the child, and of course there is another decorator to passing the data to the parent. This decorator is called @Output. Very obvious. So we have to import this decorator to your parent component import  {  Output  }  from   '@angular/core' ; Now we can use this decorator. The property type of the decorator must be an event. The data to pass becomes the event payload. So we have to import the EventEmitter, too, because in Angular an event is defined with an EventEmitter object. import  {  Output ,  EventEmitter  }  from   '@angular/core' ; Next step is to create a new instance of th...
Post a Comment
Read more