Retrieve single value from firebase Realtime database with Key and services

I am simply clueless cause I am new to this language. I want to create a detail page where I have passed Key and get a single value from firebase. So here is my Productservice.ts.

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList, AngularFireObject } from '@angular/fire/database';
import { Product } from './Product';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  productListRef: AngularFireList<any>;
  productRef: AngularFireObject<any>;

  constructor( private db: AngularFireDatabase) { }

  //create
  createProduct(prod:Product){
    return this.productListRef.push({
      name:prod.name,
      price:prod.price
    })
  }

  //get single
  getProduct(id: string){
    this.productRef=this.db.object('/product/' + id);
    return this.productRef;
  }

  //getlist
  getProductList(){
    this.productListRef = this.db.list('product');
    return this.productListRef;
  }

  //update
  updatePoduct(id,prod:Product){
    return this.productRef.update({
      name:prod.name,
      price:prod.price
    })
  }

  //Delete
  deleteProduct(id:string){
    this.productRef = this.db.object('/product/' + id);
    this.productRef.remove();
  }

  
}

Here is the product page where I have created a button to navigate to a product detail page and send a key with it. so that I can display its value in that page.

  <ngx-datatable-column name="Name"></ngx-datatable-column>
  <ngx-datatable-column name="Price"></ngx-datatable-column>
  <ngx-datatable-column name="Actions" prop="name">
    <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row" >
      <div class="item-note" item end>
        <button ion-button clear [routerLink]="['/product-detail/',row.$key]">
          <ion-icon name="newspaper" style="zoom:2.0"></ion-icon>
        </button>
        <button ion-button clear [routerLink]="['/product-edit/', row.$key]">
          <ion-icon name="create" style="zoom:2.0"></ion-icon>
        </button>
        <button ion-button clear (click)="deleteProduct(row.$key)">
          <ion-icon name="trash" style="zoom:2.0"></ion-icon>
        </button>
      </div>

      <!-- <ion-button slot="end" color="warning" name="detail" (click)="getById(row)" >Detail</ion-button> -->
    </ng-template>
  </ngx-datatable-column>