AngularFire Quickstart

1. Create a new project

# Using yarn create
yarn create @angular <project-name>
cd <project-name>

# Using npm create
npm create @angular <project-name>
cd <project-name>

optionally installing the tooling directly:

# Installing the tooling directly
npm install -g @angular/cli
ng new <project-name>
cd <project-name>

The Angular CLI's new command will set up the latest Angular build in a new project structure.

2. Install AngularFire and Firebase

ng add @angular/fire

Now that you have a new project setup, install AngularFire and Firebase from npm. This will complete the following tasks:

Add Firebase config to environments variables
Configure @NgModule for the AngularFireModule

3. Inject `Firestore`

Open /src/app/app.component.ts, and make the following changes to :

import { Component, inject } from '@angular/core';
import { Firestore } from '@angular/fire/firestore';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  firestore: Firestore = inject(Firestore);

  constructor() {

  }
}

4. Bind a Firestore collection to a list

In /src/app/app.component.ts:

import { Component, inject } from '@angular/core';
import { Firestore, collection, collectionData } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  firestore: Firestore = inject(Firestore)
  items$: Observable<any[]>;

  constructor() {
    const aCollection = collection(this.firestore, 'items')
    this.items$ = collectionData(aCollection);
  }
}

Open /src/app/app.component.html:

<ul>
  <li class="text" *ngFor="let item of items | async">
    {{item.name}}
  </li>
</ul>

5. Run your app locally

ng serve

Your Angular app will compile and serve locally, visit it we should find an empty list.

In another tab start adding data to an items collection in Firestore. As we're not authenticating users yet, be sure to start Firestore in test mode or allow reading from the items collection in Security Rules (allow read: if true).

Once you've created a items collection and are inserting documents, you should find data streaming into your Angular application and being rendered in your browser.

6. Deploy your app

Finally, we can deploy the application to Firebase hosting:

ng deploy

2.6 KiB Raw Blame History