Use new Firebase interfaces in Angular

I wanted to use a firebase in a new angular project, but i struggle severals days to make evertything working together, due mainly to a new interface with very few documentation and no samples …..

A few month ago, google publish a new library for Angular https://github.com/angular/angularfire

Installation

For this part, the documentation is clear and simple.

Just do :

ng add @angular/fire

And declare use in app.module.ts:

import { provideFirebaseApp, getApp, initializeApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';

@NgModule({
  imports: [
    provideFirebaseApp(() => initializeApp({ ... })),
    provideFirestore(() => getFirestore()),
  ],
  ...
})
export class AppModule { }

Use Firestore

In your component :

1. Import the needed functions

import { Firestore, collectionData, collection } from '@angular/fire/firestore';

1. Declare the injection

private firestore: Firestore = inject(Firestore);

1. Get a reference to your collection

collection(this.firestore, 'files')

2. Get your datas

this.files$ = collectionData(
  collection(this.firestore, 'files'), 
  { idField: 'id' }) as Observable<FileElement[]>;

Use Storage

1. Import the needed functions

import { Storage, ref, uploadBytes } from '@angular/fire/storage';

1. Declare the injection

private storage: Storage = inject(Storage);

2. Create a reference to your storage path

const path = '/uploads/myfile.txt';
const storageRef = ref(this.storage, path);

3. Upload your file

const data = 'my text file';
await uploadBytes(storageRef, data);

3. For downloading this file

import { Storage, getBytes, ref } from '@angular/fire/storage';

../..

private storage: Storage = inject(Storage);

../..

const path = '/uploads/myfile.txt';
const storageRef = ref(this.storage, path);

const file = await getBytes(storageRef);

Use Functions

This part is the less documented up to now….

Be carefull it exist 2 type of functions : HTTP and Callable

(https://stackoverflow.com/questions/51066434/firebase-cloud-functions-difference-between-onrequest-and-oncall)

If will only focus on Callable functions.

1. Create a callable function

// The Cloud Functions for Firebase SDK to create Cloud Functions and triggers.
const { logger } = require("firebase-functions");
const { onCall } = require("firebase-functions/v2/https");

// The Firebase Admin SDK to access Firestore.
const { initializeApp } = require("firebase-admin/app");

initializeApp();


exports.pong = onCall(
    { cors: true },
    async (request) => {

        // Grab the text parameter.
        const original = request.data.text;

        return { result: `Original text parameter is : ${original}` };
    }
);

For avoiding CORS issue, don’t forget to add { cors: true } on the call interface.

2. Deploy it

firebase deploy --only functions

3. Import the needed functions

import { Functions, httpsCallable } from '@angular/fire/functions';

4. Declare the injection

private functions: Functions = inject(Functions);

5. Create a reference to the function

const callable = httpsCallable(this.functions,'pong');

6. Call the function

let datas = await callable({ text: 'some-data' });

// console.log(datas) will write 'Original text parameter is : some-data'

It’s not very difficult, but if you don’t have the proper documentation it became annoying ….

have a fun programming ….