Firebase is a mobile and web application development platform developed by Google. We can build our apps very fast, without making complex back-end system. It helps to scale automatically, for even the largest apps. In this Angular 8 Firebase tutorial, we’re gonna integrate Firebase into Angular 8 App with @angular/fire module (official library for Firebase and Angular).
Related Posts:
– Angular 8 Firebase Realtime Database CRUD operations with @angular/fire
– Angular 8 Firestore tutorial with CRUD application example – @angular/fire
– Angular 8 – Upload/Display/Delete files to/from Firebase Storage using @angular/fire
Contents
Technology
– Angular 8
– @angular/fire 5.1.2
– firebase 5.9.4
Instructional Video
Integrate Firebase into Angular 8 App
Step 1: Set up the Firebase Project
Go to Firebase Console, login with your Google Account, then click on Add Project.
Enter Project name, set Project Id and select Country/Region:
Press CREATE PROJECT, browser turns into:
Click on Web App, a Popup will be shown:
Save the information for later usage.
Choose Database in the left (list of Firebase features) -> Realtime Database -> Tab RULES, then change .read and .write values to true:
Step 2: Install @angular/fire and firebase
Run command:
npm install firebase @angular/fire --save
Step 3: Add Firebase config to environments variable
Open /src/environments/environment.ts, add your Firebase configuration that we have saved when Popup window was shown:
export const environment = { production: false, firebase: { apiKey: 'xxx', authDomain: 'gkz-angular-firebase.firebaseapp.com', databaseURL: 'https://gkz-angular-firebase.firebaseio.com', projectId: 'gkz-angular-firebase', storageBucket: 'gkz-angular-firebase.appspot.com', messagingSenderId: '189575342164' } }; |
Step 4: Setup @NgModule
Open /src/app/app.module.ts, import AngularFireModule and other @angular/fire modules if necessary (we use Firebase Database, for example).
Don’t forget to specify Firebase configuration with AngularFireModule.initializeApp(firebaseConfig):
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AngularFireModule } from '@angular/fire'; import { AngularFireDatabaseModule } from '@angular/fire/database'; import { environment } from '../environments/environment'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, AngularFireModule.initializeApp(environment.firebase), AngularFireDatabaseModule, // for database ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Step 5: Use @angular/fire module in Angular component
Open /src/app/app.component.ts:
import { Component } from '@angular/core'; import { AngularFireDatabase } from '@angular/fire/database'; import { Observable } from 'rxjs'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Angular8Firebase'; description = 'Angular-Fire-Demo'; itemValue = ''; items: Observable<any[]>; constructor(public db: AngularFireDatabase) { this.items = db.list('items').valueChanges(); } onSubmit() { this.db.list('items').push({ content: this.itemValue}); this.itemValue = ''; } } |
/src/app/app.component.html:
<div class="container-fluid"> <div style="color: blue;"> <h1>{{title}}</h1> <h3>{{description}}</h3> </div> <div style="width: 300px;"> <form (ngSubmit)="onSubmit()"> <div class="form-group"> <label for="item">Item</label> <input type="text" class="form-control" placeholder="Enter content..." id="item" required [(ngModel)]="itemValue" name="item"> </div> <div class="btn-group"> <button type="submit" class="btn btn-success">Submit</button> </div> </form> </div> <h2>Content from Firebase</h2> <div class="col-md-3"> <pre *ngFor="let item of items | async">{{item.content}}</.pre> </div> </div> |
Check Result
– Run Angular project with command: npm start or ng serve.
– Open browser with url http://localhost:4200/, enter Item content.
Item data displays immediately:
Firebase Console Database:
Conclusion
Now we have known how to create a Firebase Project, how to integrate that Firebase Project into Angular Application, we also look at the idea to use @angular/fire module to work with Firebase in simple way.
Happy learning! See you later.