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>