We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Fetch data to grid

Is possible bind /fetch data to grid with this code:
constructor(private readonly db: AngularFirestore) {
this.itemsColl = db.collection<Item>('product_tbl');
this.items = this.itemsColl.snapshotChanges().pipe(
map(action => action.map(a => {
const data = a.payload.doc.data() as Item;
const id = a.payload.doc.id;
return {id, ...data}
}))
)
}
ngOnInit() {
}
or it is necessary to create a service.


3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team January 30, 2019 04:11 AM

Hi Tomasz, 

Greetings from Syncfusion. 

Grid uses DataManager which supports both RESTful JSON data service and local JavaScript object array binding. We have already discuss about the above mentioned query in the following documentation. 


Please get back to us if you need further assistance on this. 

Regards, 
Thavasianand S. 



TO Tomasz January 30, 2019 06:27 PM

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.



TS Thavasianand Sankaranarayanan Syncfusion Team January 31, 2019 01:04 AM

Hi Tomasz, 
 
We are happy that the problem has been solved. 
 
Please get back to us if you need any further assistance.  
                          
Regards, 
Thavasianand S.

Loader.
Live Chat Icon For mobile
Up arrow icon