Basic Firebase CRUD Operations in Angular

We'll be using Todos in the post for our examples. Each todo has a content string value for the todo description and a done boolean to indicate if the todo item is completed.

Setup

First you’ll want to import AngularFireDatabase and AngularFireList as well as inject the former in your constructor:

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';

import { AngularFireDatabase, AngularFireList }
  from 'angularfire2/database';

@Component({ ... })
export class AppComponent implements OnInit {
  todos$: AngularFireList<any[]>;

  constructor(private af: AngularFireDatabase) {}

  ngOnInit() {
    // ...
  }

  addTodo(value: string): void {
    // ...
  }
  deleteTodo(todo: any): void {
    // ...
  }

  toggleDone(todo: any): void {
    // ...
  }

  updateTodo(todo: any, newValue: string): void {
    // ...
  }
}

You’ll also want to make sure that AngularFireDatabase is provided in your app module:

// ...

import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';
import { AngularFireDatabase } from 'angularfire2/database';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // ...
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule
  ],
  providers: [AngularFireDatabase],
  bootstrap: [AppComponent]
})
export class AppModule { }

Reading Todos

imply declare a class property of type AngularFireList and get the /todos node from your Firebase database with AngularFireDatabase.list in the OnInit lifecycle hook:

todos$: AngularFireList<any[]>;

ngOnInit() {
  this.todos$ = this.af.list('/todos');
}

this.todos$ = this.af.list('/todos', ref => 
  ref.limitToFirst(3)
);

<ul>
  <li *ngFor="let todo of (todos$ | async)" [class.done]="todo.done">
    {{ todo.content }}
  </li>
</ul>

Creating Todos

Adding a new todo item is really easy, just call push on your AngularFireList instance:

addTodo(value: string): void {
  this.todos$.push({ content: value, done: false });
}

Updating and Deleting Todos

To update or delete a todo, things are a bit different because you’ll need a reference to the todo item that is to be updated or deleted. This can be done with AngularFireDatabase.object. Objects inside a Firebase have a unique key available as $key:

Updating Todos

Here’s how you would toggle the completed state of a todo:

🤩 Our Amazing Sponsors 👇

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

toggleDone(todo: any): void {
  this.af.object('/todos/' + todo.$key)
    .update({ content: todo.content, done: !todo.done });
}

Or update its content:

updateTodo2(todo: any, newValue: string): void {
  this.af.object('/todos/' + todo.$key)
    .update({ content: newValue, done: todo.done });    
}

As an alternative to the update method on a Firebase object, you could also use set. Using the set method will create a new item if one doesn't exist and replaces to whole object, so its destructive.

Deleting Todos

Deleting an item is just as easy as updating it:

deleteTodo(todo: any): void {
  this.af.object('/todos/' + todo.$key).remove();
}

Note that set, update and remove return a promise to you can chain then/catch calls to let you act on a successful operation or an error.