How add and retrieve smart table data for Google cloud firestore

Question

I'm engaging with an angular project. I'm using visual studio code as the text editor. I used the ng2-smart-table as a table of my project as the manufacture component. But I cannot understand how add data as well as retrieve data from firebase. anybody can help me. As above mentioned. i use the table template inside the manufacture component.

This is my table.

manufacture.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'ngx-manufacture',
styles:[],
template: `
<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
`
})
export class ManufactureComponent implements OnInit {

constructor() { }

ngOnInit() {
}

settings = {
    add: {
        addButtonContent: '<i class="nb-plus"></i>',
        createButtonContent: '<i class="nb-checkmark"></i>',
        cancelButtonContent: '<i class="nb-close"></i>',
    },
    edit: {
        editButtonContent: '<i class="nb-edit"></i>',
        saveButtonContent: '<i class="nb-checkmark"></i>',
        cancelButtonContent: '<i class="nb-close"></i>',
    },
    delete: {
        deleteButtonContent: '<i class="nb-trash"></i>',
        confirmDelete: true,
    },
    columns: {
        id: {
            title: 'ID'
        },
        name: {
            title: 'Full Name'
        },
        username: {
            title: 'User Name'
        },
        email: {
            title: 'Email'
        }
    }
};

    data = [
        {
            id: 1,
            name: "Leanne Graham",
            username: "Bret",
            email: "Sincere@april.biz"
        },
        {
            id: 2,
            name: "Ervin Howell",
            username: "Antonette",
            email: "Shanna@melissa.tv"
        },

        {
            id: 11,
            name: "Nicholas DuBuque",
            username: "Nicholas.Stanton",
            email: "Rey.Padberg@rosamond.biz"
        }
    ];
}

Then what should i do for this problem.

Answer 1

Behold: the DataSource

ng2-smart-table uses DataSource class to be fully operational in CRUD action. It is quite easy if you dealing with local DataSource (since it was stored offline ): They provide LocalDataSource class in which derived from their DataSource . Your code will look like this.

import { Component, OnInit } from '@angular/core';
import { LocalDataSource } from 'ng2-smart-table';

@Component({
selector: 'ngx-manufacture',
styles:[],
template: `
<ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>
`
})
export class ManufactureComponent implements OnInit {

constructor() { }

ngOnInit() {
}

settings = {
    add: {
        addButtonContent: '<i class="nb-plus"></i>',
        createButtonContent: '<i class="nb-checkmark"></i>',
        cancelButtonContent: '<i class="nb-close"></i>',
    },
    edit: {
        editButtonContent: '<i class="nb-edit"></i>',
        saveButtonContent: '<i class="nb-checkmark"></i>',
        cancelButtonContent: '<i class="nb-close"></i>',
    },
    delete: {
        deleteButtonContent: '<i class="nb-trash"></i>',
        confirmDelete: true,
    },
    columns: {
        id: {
            title: 'ID'
        },
        name: {
            title: 'Full Name'
        },
        username: {
            title: 'User Name'
        },
        email: {
            title: 'Email'
        }
    }
};

    data: LocalDataSource = new LocalDataSource();

    constructor() {
        this.data.load([
            {
                id: 1,
                name: "Leanne Graham",
                username: "Bret",
                email: "Sincere@april.biz"
            },
            {
                id: 2,
                name: "Ervin Howell",
                username: "Antonette",
                email: "Shanna@melissa.tv"
            },
            {
                id: 11,
                name: "Nicholas DuBuque",
                username: "Nicholas.Stanton",
                email: "Rey.Padberg@rosamond.biz"
            }
        ]);
    }
}

I suggest you start from this to learn how you use LocalDataSource .

So what about the online data source?

Now here's come the real deal.

Last time, I was tasked to create an admin display using Angular, API backend server, and ng2-smart-table . I've managed it with LocalDataSource , but then come the problem: This wasn't a local data source . After some furious night I found this , in which shows that they were two version on how they handling data: local and server .

This might hurt you a bit, but I found that you had to Create your own DataSource . An easy approach is by deriving from LocalDataSource . Your new DataSource might look like this.

import { LocalDataSource } from 'ng2-smart-table';

export class CustomDataSource extends LocalDataSource {
    constructor() { super(); }

    doSomeDataFetchFromFirestoreAsync(): Promise<any[]> {
        // Insert your data fetch flow here ...
    }

    doSomeAddFunctionToFirestoreAsync(element: any): Promise<any> {
        // Insert your data addition flow here ...
    }

    doSomeDeleteFunctionToFirestoreAsync(): Promise<any> {
        // Insert your data removal flow here ...
    }

    doSomeUpdateFunctionToFirestoreAsync(): Promise<any> {
        // Insert your data update flow here ...
    }

    load(): Promise<any> {
        // Do Some fetch from firestore as aync method, then (on completion) redirect back to LocalDataSource::load() method to maintain the chain
        return doSomeDataFetchFromFirestoreAsync().then((preparedDataSet: any[]) => super.load(preparedDataSet));
    }

    add(element: any): Promise<any> {
        // Do Some add function to firestore as aync method, then (on completion) redirect back to LocalDataSource::add() method to maintain the chain
        return doSomeAddFunctionToFirestoreAsync(element).then((addedElement) => super.add(addedElement));
    }

    remove(element: any): Promise<any> {
       // Same as load or add actually
       return doSomeDeleteFunctionToFirestoreAsync(element).then(() => super.remove(element));
    }

    update(element: any, values: any): Promise<any> {
        // This one is a little bit tricky: The DataSource will try find unchanged `element` first, then updates the value inside unchanged one with `values`
        return doSomeUpdateFunctionToFirestoreAsync(element, values).then((editedElement) => super.update(element, editedElement));
    }
}

And now, your code might look like this.

// ...
    data: CustomDataSource = new CustomDataSource();

    constructor() {
        this.data.load();
    }
// ...
}

Notes

This approach is the simple way I found based on ng2-smart-table DataSource definition. If you want to use ServerDataSource instead, you can check this gist for a partial implementation of ServerDataSource .