Building a Web App with Angular and Firebase



In this tutorial, you’ll learn how to create a web app using Angular and Firebase. You’ll start by creating a web app using the Angular command line interface (CLI). Then you’ll learn how to use Firebase inside an Angular web application.


Creating A Web App Using Angular and Firebase

Let’s get started by creating an Angular web app using the Angular CLI.

# create new Angular app
ng new AngularFirebase

Once the project has been created navigate to the project directory and start the Angular application server.

cd AngularFirebase
npm start

Once the application has been started you will be able to view the Angular application running at http://localhost:4200.


Setting Up The Application

By default the Angular application has a root component defined in the app.component.ts file. But to me it doesn’t really look organized. So, let’s try to create a component called root which would serve as the root component for our Angular application. Create a new component called root using the following command:

# creating Angular component
ng g component root

You will have the root component created which the basic files.

create src/app/root/root.component.css (0 bytes)
create src/app/root/root.component.html (23 bytes)
create src/app/root/root.component.spec.ts (614 bytes)
create src/app/root/root.component.ts (261 bytes)
update src/app/app.module.ts (390 bytes)

Modify the HTML code inside the root/root/component.html file.

<div class="header">
    <h3>
        Angular Firebase Task Manager
    </h3>
</div>

Delete all the files inside the app folder except app.module.ts and remove the AppComponent imports from the app.module.ts file. Bootstrap the RootComponent in the NgModule. Here is how the app.module.ts file looks:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import