Angular 8 Firebase tutorial: Integrate Firebase into Angular 8 App with @angular/fire
Angular 8
Male avatar

loveprogramming viết ngày 13/03/2021


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
  • @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: '',
    databaseURL: '',
    projectId: 'gkz-angular-firebase',
    storageBucket: '',
    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';

  declarations: [
  imports: [
    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';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'Angular8Firebase';
  description = 'Angular-Fire-Demo';

  itemValue = '';
  items: Observable;

  constructor(public db: AngularFireDatabase) {
    this.items = db.list('items').valueChanges();

  onSubmit() {
    this.db.list('items').push({ content: this.itemValue});
    this.itemValue = '';


<div class="container-fluid">
  <div style="color: blue;">

  <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 class="btn-group">
        <button type="submit" class="btn btn-success">Submit</button>

  <h2>Content from Firebase</h2>
  <div class="col-md-3">
    <pre *ngFor="let item of items | async">{{item.content}}</.pre>


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:



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.

Bình luận

{{ }}
Bỏ hay Hay
Male avatar
{{ comment_error }}

Hiển thị thử

Chỉnh sửa

Male avatar


545 bài viết.
97 người follow
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 11 tháng trước
1 0
Male avatar
1 0 Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 9 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 9 tháng trước
1 0
Bài viết liên quan
Male avatar
0 0 no_toc]Tutorial: Angular 8 Firestore tutorial with CRUD app...
loveprogramming viết 7 tháng trước
0 0
Male avatar
0 0 Angular Firebase Auth Email/Passwo...
loveprogramming viết 6 tháng trước
0 0


{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}

Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
545 bài viết.
97 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!