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.

5 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. 

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 }
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}

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 {
(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.  
Thavasianand S.

MI Michael November 9, 2022 05:13 PM

Thanks for this code.

How do I join two (or more) collections into Grid?

I have the scenario working in mat-grid, but I would like to switch over to Syncfusions Grid.

Do you have any examples of how to join collections in Syncf

JC Joseph Christ Nithin Issack Syncfusion Team November 15, 2022 10:00 AM

Hi Micheal,

  Based on your query, you want to join two or more collections in a grid, in EJ2 Grid, you can join two or more collections using foreign key column feature of the EJ2 Grid. Refer the below documentation for more information on foreign key column.

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/foreign-key-column/

Sample: https://ej2.syncfusion.com/angular/demos/#/material/grid/column/foreign-key

If this is not your requirement, share the below details.

  • Explain how you want to add two collections to the grid.
  • Video or screenshot to explain your requirement.
  • Complete grid rendering code you are using.
  • Syncfusion package version you are using.


Jospeh I.

Live Chat Icon For mobile
Up arrow icon