async datasource with angular material table / angular 7 / nodejs / mongodb

Question

After importing a big database with more than 13.000 documents, I'm experiencing a big delay when displaying the data in my angular material table. I already tried to load the data asynchronously to the table, but was unable to do it. Can someone guide me?

This is how I'm retrieving the data in my component.

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

   loadDocuments() {
    this._documentService.getDocuments().subscribe((data: Document[]) => {
      this.documents = data

      this.dataSource = new MatTableDataSource<Document>(this.documents );
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort
      this.sort.sort(<MatSortable>{
        id: 'name',
        start: 'asc'
      });

    })

  }

// searching function

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

I've been checking some examples and what they do is declaring as observable datasource... but i could not adapt it.

//EDITED

In my nodejs i have this code

  documentsCtrl.getDocuments = (req, res) => {
    documentsModel.find().then((documents) => {
        res.json(documents)
    }).catch(err => {
        res.json(err)
    })
}

This function just find all documents that i want retrieve in my component.

This request takes like 4000ms more or less to be displayed in my client

So til this request is completed... i have other function that show a loading spin in my table... but it takes like 4 or 5 seconds to show the data ( the time that the request needs to be completed ) how can i improve this performance?

i am not sure about that, i am only showing 10 rows in my table, the problem i think is when i ask the data in my server, it takes 4 seconds to load all the data, i am checking it with Morgan... @JohnPeters — Sergio Cano, Jul 04 '19 at 22:40

score 1 · Answer 1 · answered Jul 05 '19 at 10:50

I had a similar problem displaying around 10'000 rows in an Angular Material table with a paginator and sorting. Check out this answer to another question.

The key takeaway is to set your MatPaginator before you assign your data to the MatTableDataSource.

Change your code to the following:

this.documents = data;
// Initialize with an empty array so you don't get an error when setting the paginator
this.dataSource = new MatTableDataSource<Document>([]);

// Set paginator & sort
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;

// Finally assign the data
this.dataSource = new MatTableDataSource<Document>(this.documents);

thanks for you answer, i think i didn't explain it well... when the data is loaded, the table works perfectly... my problems is loading the data... it takes 4 or 5 seconds to be displayed... when i call my API to get the data from my database, it takes long time... a solution would be to ask... for example, if my pageSize is 10 rows... ask to the API the first 10 rows... then if i change the pageSize ask for the next rows... something like that... — Sergio Cano, Jul 05 '19 at 15:20

async datasource with angular material table / angular 7 / nodejs / mongodb

1 Answers1