NgFirestore

An opinionated library for easily integrating Firestore data with Angular and Angular Forms

Installation

npm install ng-firestore

yarn add ng-firestore

example: app.module.ts

@NgModule({
    declarations: [...],
    imports: [
        ...,
        NgFirestoreModule.initialize(environment.firebase),
    ],
})

app.component.ts

// Class should be initialized with empty values, otherwise typescript will remove those properties
class User {
  firstName = '';
  lastName = '';
  age?: number = undefined;
}

class AppComponent {
  constructor(private ngFirestore: NgFirestore) { }

  userResource = this.ngFirestore.getDataResource<User>(
    'users',
    User
  );

  form = this.ngFirestore.getDataResourceForm(
    this.userResource,
    User
  );
}

app.component.html

<form [formGroup]="form.ngForm" (ngSubmit)="form.save()">
  <input
    [formControl]="form.ngForm.get('firstName')"
  />
  <input
    [formControl]="form.ngForm.get('lastName')"
  />
  <input
    [formControl]="form.ngForm.get('age')"
    type="number"
  />
  <button>Save</button>
</form>

<ul>
  <li *ngFor="let user of userResource.getAll() | async">
    {{ user.firstName }} {{ user.lastName }},
    {{ user.age }}
    <button (click)="form.loadNewResource(user.id)">
      EDIT
    </button>
    <button (click)="userResource.delete(user.id)">
      DELETE
    </button>
  </li>
</ul>