Hello Thavasianand
Before giving this question I read everything from top to bottom a couple of times. What I was referring to, is what I present.
1. Create service and add this code:
import { Injectable } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators'
export interface Item { id: string }
@Injectable({
providedIn: 'root'
})
export class FirestoreDataService {
public Items: Observable;
product: Observable
constructor(public db: AngularFirestore) {
this.product = db.collection('product_tbl').snapshotChanges().pipe(
map(action => action.map(a => {
const data = a.payload.doc.data() as Item;
const id = a.payload.doc.id;
return {id, ...data}
}))
)
}
getProduct(){
return this.product;
}
}
2. In this case "product.component.ts" add this:
import { FirestoreDataService, Item } from '../firestore-data.service'
public ProdItems: Item[];
3. Finaly in ngOnInit create this
ngOnInit(): void {
this.data.getProduct().subscribe(
(prod: Item[]) => {
this.ProdItems = prod
}
);
}
When I discovered that it works. I have tried some options and they work well.
And this is the final result. Thank You so much.
So now we can take a coffee and look for other challenges.
