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:

Comments

Post a Comment

Popular posts from this blog

Utilize 3rd party Javascript libraries in your Angular 2+ application with CLI

Von
Not everything is available as a native Typescript library. Due to that sometimes you might need to use 3rd party libraries. After creating a new project with Angular CLI you will experience that VS Code does not know any libraries you have imported in the header tag and the compiler complains when you try to use this libraries. The reason is: You are missing the typings. The typings describe the functionality of the libary and make that available in your project through intellisense and for the compiler. But before you start creating your own typings do the following checks: 1. Does the vendor of the library provide the typings? If yes, install through npm 2. Are the typings available on definitely typed ? If yes, then take it from there. If this is not the case then you can do your own typings. If you want to do that properly, then you should write the complete set of typings for the library and upload to definitely typed to provide it for the community. OK, this might b...
Post a Comment
Read more

Typescript: json2ts is a nice helper

Von
Writing interfaces can be annoying. You can save a lot of time when you have to define Typescript interfaces for data that you are loading from a webservice.  Instead of typing all the interfaces yourself you can just use a nice service in the web: json2ts Just paste in your json code and it generates the corresponding interfaces in Typescripts. Example JSON: [   {      "city": "Berlin",     "country": "Germany",     "currencies": [{"code":"EUR"}]   },   {      "city": "Paris",     "country": "France",     "currencies": [{"code":"EUR"}]   } ] Generated code: declare module namespace {     export interface Currency {         code: string;     }     export interface RootObject {         city: string;         country: string;         currencies: Currency...
Post a Comment
Read more

Generate documentation for Angular projects with Compodoc

Von
Sometimes the structure of Angular projects can become confusing. After adding tons of components and modules it might be difficult to keep track of what is what. Compodoc can help you out by generating a much better to read documentation for your project. It can give you a visual and easy to browse overview of all the code in your application and lots of useful features. How to install: Compodoc is available by npm. First install it globally: npm install -g @compodoc/compodoc Then install it in your project: npm install --save-dev @compodoc/compodoc In a next step you have to add a command to your package.json. In the 'scripts' area add the following line: "compodoc" :  "./node_modules/.bin/compodoc -p src/tsconfig.app.json" Hint: in the original documentation at the moment it refers to tsconfig.json which is wrong and would give you an error message. Finally generate the documentation and open it in the browser: npm run compodoc co...
Post a Comment
Read more