8

I use Angular 6, Firebase and Angular Material.

I have 30,000 json objects stored in firebase that I want to load them into a mat-table. Only I get way below that I wish. I wait 30 seconds before I can click on my application, sometimes chrome is in error ...

Yet I load my data after pagination.

Can someone tell me if this is normal or if there is a strategy to overcome this problem? Thank you.

Maybe i can do this with angular 7 and infite scrolling ? Do you have an example pleas?

export class TableComponent implements OnInit {

    showSpinner = true;

    Data = {nom: '', finessgeo: '', cat1: '', commune: '', CP: '', departement: '', tel: ''}

    displayedColumns = ['nom', 'finessgeo', 'cat1', 'commune', 'CP', 'departement', 'tel'];

    dataSource = new MatTableDataSource();

    applyFilter(filterValue: string) {
        filterValue = filterValue.trim();
        filterValue = filterValue.toLowerCase();
        this.dataSource.filter = filterValue;
    }

    @ViewChild(MatPaginator) paginator: MatPaginator;

    @ViewChild(MatSort) sort: MatSort;

    ngAfterViewInit() {
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        return this.geoService.getGeos().subscribe(res => {
            this.dataSource.data =
                res;
            this.showSpinner = false;
        });
    }

    constructor(public authService: AuthService, private geoService:
        GeoService, private router: Router, private database: AngularFireDatabase) {
    }

    ngOnInit() {}
}
Alan ENTEM
  • 129
  • 2
  • 10

1 Answers1

8

I have some proposals.

First: Do not to load all 30k rows to the client. Try to use server side pagination. This should fix it all. Also you have to implement all your filter and sort functions on the api. Use the client just to display that data.

If this is not an option:

  • Sort the data on the server. As soon as possible. If you can, directly inside your database query.
  • Check if your component adds all rows into the DOM. This would take very much cpu time.
  • Use the performance tab from chrome dev tools, to check what is taking so long. And try to optimize it.
  • Check your html template. Try to make the rows as simple as possible. Like less nested elements, additional classes and so on.
Konrad Klockgether
  • 367
  • 2
  • 8
  • Thank you for your help. Do you have an example of server side pagination with angularfire and mat- table ? – Alan ENTEM Apr 24 '19 at 07:49
  • I did not used firebase before, but the principles are for every api the same. Found this [video](https://www.youtube.com/watch?v=TIGj7KzXtxg) which looks good at the first sight. – Konrad Klockgether Apr 24 '19 at 07:55
  • To fill the paginator with correct values, check out the [documentation](https://material.angular.io/components/paginator/api) – Konrad Klockgether Apr 24 '19 at 07:57
  • Can you tell me more ? – Alan ENTEM Apr 24 '19 at 08:00
  • If you have specific questions, maybe yes. – Konrad Klockgether Apr 24 '19 at 08:07
  • You should click on the record button before you trigger the task which you want to investigate. After it is finished, click on stop. (While recording, it takes slightly more time to execute.) Then you see the results and the functions witch are executed and how long very step takes. Check out the "Bottom up" tab to see more. Also check out the [documentation](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/) – Konrad Klockgether Apr 24 '19 at 08:15
  • yes i try but maybe you know the limit of number of row in mat-table ? – Alan ENTEM Apr 24 '19 at 10:18
  • This should not be limited by the mat-table. If you try to add so much elements to DOM and work with big data sets in the client, you are reaching the limits of the browser, the js-engine and the device it self. Always try to load as little data to the client as possible. – Konrad Klockgether Apr 24 '19 at 11:40
  • Thanks Konrad. But I thought that pagination was doing the data load page by page, right? – Alan ENTEM Apr 26 '19 at 14:53
  • Correct. And only loading that page you actualy display. You should also drop data which you do not need anymore. – Konrad Klockgether Apr 29 '19 at 15:31