How to retrieve all id of firebase database content using Angular? - html

Question

I am trying to retrieve all firebase database content with their IDs. Currently I have two functions, getAll() and get(input) which returns one specific product with the given ID. My current implementation gives me all the objects from firebase database without the IDs. What do I need to change to be able to get all objects with their IDs?
product.service.ts
import { Injectable } from '#angular/core';
import { AngularFireDatabase } from '#angular/fire/database';
import { Product } from './admin/product-form/product-interface';
#Injectable({
providedIn: 'root'
})
export class ProductService {
constructor(private db: AngularFireDatabase) { }
create(product){
return this.db.list('/products').push(product);
}
getAll() {
return this.db.list('/products').valueChanges();
}
get(productId){
return this.db.object('/products/' + productId).valueChanges();
}
}
product-form.component.ts
import { Product } from './product-interface';
import { ProductService } from './../../product.service';
import { CategoryService } from './../../category.service';
import { Component, OnInit } from '#angular/core';
import { Router, ActivatedRoute } from '#angular/router';
import { take } from 'rxjs/operators';
#Component({
selector: 'app-product-form',
templateUrl: './product-form.component.html',
styleUrls: ['./product-form.component.css']
})
export class ProductFormComponent implements OnInit {
categories$;
product = {};
// product:Product;
constructor(
private route: ActivatedRoute,
private router: Router,
private categoryService: CategoryService,
private productService: ProductService)
{
}
save(product){
this.productService.create(product);
this.router.navigate(['/admin/products']);
}
ngOnInit(): void {
this.categories$ = this.categoryService.getCategories();
let id = this.route.snapshot.paramMap.get('id');
this.productService.getAll().subscribe((a) =>
this.product = a);
}
}
admin-products.component.ts
import { ProductService } from './../../product.service';
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-admin-products',
templateUrl: './admin-products.component.html',
styleUrls: ['./admin-products.component.css']
})
export class AdminProductsComponent implements OnInit {
products$;
constructor(private productService: ProductService) {
this.products$ = this.productService.getAll()
}
ngOnInit(): void {
this.products$.subscribe(p => {
console.log(p, 'products');
})
}
}
admin-products.component.html
<p>
<a routerLink = "/admin/products/new" class="btn btn-primary">New Product</a>
</p>
<table class="table">
<thead>
<tr>
<th>Title</th>
<th>Price</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let p of products$ | async">
<td>{{ p.title }}</td>
<td>{{ p.price}}</td>
<td>
<a [routerLink]="['/admin/products/', p.$key]">Edit</a>
</td>
</tr>
</tbody>
</table>

Answer 1

Btw, if you subscribe to observables in components (not in angular services), you will have to unsubscribe them ngOnDestroy() lifecycle hook to avoid memory and performance issues in your browser.

Answer 2

You'll need to use snapshotChanges() instead of valueChanges(). valueChanges() only gives you the document data while snapshotChanges() will also give you metadata.
View relevant docs