How To Use Firebase With Angular 5 [Angular 4/5 Firebase Tutorial]

By Mohit Tanwani Last updated Jan 29, 2018

After building a simple Angular 4 Firebase Todo app and Angular 4 Firebase Authentication app, here we’re going to learn how to use firebase with Angular 5 using angularfire2 throughout this Angular firebase tutorial.

Firebase is basically developed for mobile and web application development platform built by Google.

The main advantage of firebase is, we can build complex applications without using a traditional backend.

So, let’s see the use of firebase with Angular 5 app and eventually build an Angular 5 firebase example.

1. Setup the Firebase Project

First of all, we need to build a firebase project.

By going to firebase console, you can create your own account and project for free.

1.1 Create Firebase Project

First of all, let’s create a firebase project.

1.2 Go For Web App

Here, we’ve to go for web app.

1.3 Get Firebase Project Config

Now, let’s get the firebase config that we’re going to use in our Angular app to get the connection with firebase project.

1.4 Set Firebase Rules True

Here, we’re not using any authentication method, we’re directly calling the firebase data. So, let’s make the rules True.

We’re all set with firebase project.

2. Create Angular 5 Project

Now, let’s create an Angular 5 app using Angular CLI.

npm install -g @angular/cli@latest

Note: Here, I’ve installed the 1.6.4 version of Angular CLI.

Related,

ng new angular5-firebase-tutorial

cd angular5-firebase-tutorial

Before going further, make sure that your app is running properly.

ng serve

Now, run your app at http://localhost:4200.

3. Install Firebase [angularfire2] In Angular 5 App

AngularFire is the official library for Firebase and Angular.

This angular firebase tutorial is mainly focused on creating an angular 5 firebase example. But it’s compatible with Angular 4 as well with minor changes.

So, if you’re facing any issues with angularfire2, you can visit angularfire2 document

Basically, it allows us to build a bridge between your Angular app and firebase database.

So, let’s install angularfire2 in Angular app.

npm install firebase angularfire2 --save

Now, we’re ready to use firebase with Angular 5 app.

4. Use Firebase With Angular 5 App

Firstly, let’s set the firebase configuration to environment variable in our Angular app.

/src/environments/environment.ts

Note: This configurations are taken from firebase app what we’ve setup intially.

config: {
    apiKey: "YOUR API KEY",
    authDomain: "angular5-firebase-tutorial.firebaseapp.com",
    databaseURL: "https://angular5-firebase-tutorial.firebaseio.com",
    projectId: "angular5-firebase-tutorial",
    storageBucket: "angular5-firebase-tutorial.appspot.com",
    messagingSenderId: "YOUR MESSAGING SENDER ID"
}

Now, let’s set up the main module by importing firebaseModules and initilized the app.

/src/app/app.module.ts

//Import browsermodule
import { BrowserModule } from '@angular/platform-browser';
//Import core
import { NgModule } from '@angular/core';
//Import forms
import {FormsModule} from '@angular/forms';
//Import firebase
import {AngularFireModule} from 'angularfire2';
import {AngularFireDatabaseModule} from 'angularfire2/database';
//Import App component
import { AppComponent } from './app.component';
//Import environment
import {environment} from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AngularFireModule.initializeApp(environment.config), //Initialize firebase
    AngularFireDatabaseModule, // for database
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here, we’re ready to use the firebase in our app.

Now, it’s just required to import the necessary dependencies in your component. Here, we’re are using app component.

/src/app/app.component.ts

//Import core
import { Component, OnInit } from '@angular/core';
//Import firebase dependencies
import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database-deprecated';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [AngularFireDatabase]
})
export class AppComponent implements OnInit {
  	title = 'Angular Firebase Tutorial';
	user = {};
  	users: FirebaseListObservable<any[]>;

  	constructor(private db: AngularFireDatabase) {}

  	//Get the data from firebase
  	ngOnInit() {
  		this.users = this.db.list('/users');
  	}
  	//Save data to firebase
  	onSubmit() {
  	   	this.users.push(this.user);
    	this.user = {};
  	}
}

Finally, we have got the HTML with the form to submit the data to firebase and populate the data fetched from firebase.

/src/app/app.component.html

<div class="container">
  <div class="row">
    <h1 align="center">
      Welcome to {{ title }}!
    </h1>
    <div class="col-md-6">
    <h2>Form to enter data</h2>
    <form (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="firstName">First Name</label> <input type="text"
          class="form-control" placeholder="Enter First Name..." id="firstName"
          required [(ngModel)]="user.firstName" name="firstName">
      </div>
      <div class="form-group">
        <label for="lastName">Last Name</label> <input type="text"
          class="form-control" placeholder="Enter Last Name..." id="lastName"
          required [(ngModel)]="user.lastName" name="lastName">
      </div>

      <div class="btn-group">
        <button type="submit" class="btn btn-success">Submit</button>
      </div>
    </form>
    </div>
    <div class="col-md-6">
      <h2>Content from Firebase</h2>
      <pre *ngFor="let user of users | async">
        {{user.firstName}} | {{user.lastName}}
      </pre>
    </div>
  </div>
</div>

Furthermore, you can apply the reactive form approach for your HTML forms and can implement the form validations.

Note: Here, I’ve used bootstrap CSS in index.html to beautify the HTML.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Now, run your app and see the browser window. The following would be the output.

That’s it, I hope you loved this Angular Firebase Tutorial and it helped you to learn the use of firebase with Angular 5.

Furthermore, if you’re looking for the code, here is the Github repository for Angular 5 Firebase Example.

Final words, don’t forget to share with your friends on below social media.

Angular Firebase Tutorial