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

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>