You can also query the Firebase database from your Angular application. Firebase requires you to index field combinations for a query that uses multiple fields. This allows Firebase to easily look them up when you call the query at another point in time.

Set Up Your Angular App and Firebase Database

Before writing your Firebase queries, you will need to create an Angular application and a Firebase Database. You will also need to configure your Angular app to connect to your database.

If you do not have an existing Angular application, you can use the ng new command to create a new project with all the necessary Angular files. ng new new-angular-app Create a new Firebase Database for the Angular app by logging into Firebase and following the prompts to create a new Firebase project. In your new Cloud Firestore Database, create two collections (also known as tables) for a “Product” and a “Supplier”. A supplier can supply multiple products. Each product is also connected to the supplier using the “supplierId” field. Enter the following data into the “Product” table. Enter the name, productId, and supplierId fields as strings. Enter the price and inStock fields as numbers. Document ID Fields product1 name: “Ribbons” price: 12. 99 inStock: 10 productId: “P1” supplierId: “S1” product2 name: “Balloons” price: 1. 5 inStock: 2 productId: “P2” supplierId: “S1” product3 name: “Paper” price: 2. 99 inStock: 20 productId: “P3” supplierId: “S1” product4 name: “Table” price: 199 inStock: 1 productId: “P4” supplierId: “S2” Here’s an example showing how this should look: Enter the following data into the “Supplier” table. Enter all fields as strings. Document ID Fields supplier1 name: “Arts and Crafts Supplier” location: “California, USA” supplierId: “S1” supplier2 name: “Amazing Tables” location: “Sydney, Australia” supplierId: “S2” Here’s what the supplier1 entry should look like: Install angular/fire into your app. npm i @angular/fire In Firebase, open the Project settings. Click on the angle brackets logo to add Firebase to your Angular application. Firebase will provide you with configuration details that you can use to connect your Angular app to the Firebase Database. Replace the contents in environments/environment. ts with the following code. You will need to change the values within firebaseConfig. Change these to match the configuration that Firebase provided you in the previous step. export const environment = {  production: false,  firebaseConfig: {    apiKey: “AIzaSyBzVyXBhDlvXQEltNkE9xKq-37UBIanDlM”,    authDomain: “muo-firebase-queries. firebaseapp. com”,    projectId: “muo-firebase-queries”,    storageBucket: “muo-firebase-queries. appspot. com”,    messagingSenderId: “569911365044”,    appId: “1:569911365044:web:9557bfef800caa5cdaf6e1”  }}; Import the environment from above, along with the Angular Firebase modules into src/app/app. module. ts. import { environment } from “. . /environments/environment”;import { AngularFireModule } from ‘@angular/fire/compat’;import { AngularFirestoreModule } from “@angular/fire/compat/firestore”; Add the Firebase modules to the imports array: AngularFirestoreModule,AngularFireModule. initializeApp(environment. firebaseConfig)

How to Write a Complex Firebase Query in a Services File

You can query tables in your Firebase database by using a services file.

Create a new folder called “services”. Inside the folder, create a new file called “service. ts”. Add the AngularFirestore import, constructor, and class into the file. import { Injectable } from ‘@angular/core’;import { AngularFirestore } from ‘@angular/fire/compat/firestore’;@Injectable({  providedIn: ‘root’})export class Service {  constructor(private db: AngularFirestore) { }} In this query example, list the products based on a Supplier’s name. Additionally, filter the list to only display the item with the lowest stock. Because Firebase is not a rational Database, we will need to query the two separate tables using more than one query. To do this, create a new function called getSupplier(), to handle the first query. The function will return the row in the “Supplier” table that matches the name. getSupplier(name: string) {    return new Promise((resolve)=> {      this. db. collection(‘Supplier’, ref => ref. where(’name’, ‘==’, name)). valueChanges(). subscribe(supplier => resolve(supplier))    })  } Create another function called getProductsFromSupplier(). This query queries the database for Products associated with a particular supplier. Additionally, the query also orders results by the “inStock” field and only displays the first record on the list. In other words, it will return the product for a particular supplier, with the lowest “inStock” count. getProductsFromSupplier(supplierId: string) {    return new Promise((resolve)=> {      this. db. collection(‘Product’, ref => ref. where(‘supplierId’, ‘==’, supplierId). orderBy(‘inStock’). startAt(0). limit(1)). valueChanges(). subscribe(product => resolve(product))    })  } In the src/app/app. component. ts file, import the service. import { Service } from ‘src/app/services/service’; Add a constructor inside the AppComponent class, and add the service to the constructor. constructor(private service: Service) { } Create a new function called getProductStock(). This function will print the product with the lowest stock that a particular supplier provides. Make sure to call the new function in the ngOnInit() function, and declare a variable to store the result. products: any;ngOnInit(): void {    this. getProductStock();}async getProductStock() {   } Inside the getProductStock() function, use the two queries from the services file. Use the first query to get the record of a supplier based on the name. Then, use the supplierId as an argument for the second query, which will find the product from that supplier, with the lowest stock. let supplier = await this. service. getSupplier(‘Arts and Crafts Supplier’); this. products = await this. service. getProductsFromSupplier(supplier[0]. supplierId); Remove the contents in the src/app/app. component. html file, and replace it with the following:

Products with lowest stock from “Arts and Crafts Supplier”

<div *ngFor=“let item of products”>  

Name: {{item. name}}

  

Number in stock: {{item. inStock}}

  

Price: ${{item. price}}