Lazy Load data from Firebase Angular Material Table App

Question

I use Angular Cli, AngularFire2 and Firebase.

I use the angular hardware table that works like a charm with small volume data but when I switch to a number of 300,000 objects, my application is totally slowing down, or even bug ...

Voice my data:

{
    "rpps": [

        {
            "IdentifiantPP": "10101553021",
            "Prenom": "PAULINE",
            "Nom": "DEROT",
            "Libellesavoir": "-",
            "MSS": "-"
        },
        {
            "IdentifiantPP": "10101553039",
            "Prenom": "PAULINE",
            "Nom": "LEMOINE",
            "Libellesavoir": "-",
            "MSS": "-"
        },

...


    ]
}

Here is my code

//Service.ts

import { Injectable, Input } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import * as firebase from 'firebase';
import DataSnapshot = firebase.database.DataSnapshot;
import { Observable, interval, pipe } from 'rxjs';
import {switchMap, map} from 'rxjs/operators';


import { AngularFireDatabase, AngularFireList, AngularFireObject} from 'angularfire2/database';

@Injectable()
export class AnnuairesService {

medecins: AngularFireList<any>;

constructor(private database: AngularFireDatabase) {this.medecins = database.list('rpps');  }

getMedecins() { return this.medecins.snapshotChanges().pipe(map(actions => {
  return actions.map(a => {
    const data = a.payload.val();
    const key = a.payload.key;
    return {key, ...data };
  });
})); }

}

Component.ts

export class MedListComponent   {

  Medecin = {
IdentifiantPP: '',
Prenom: '',
Nom: '',
Libellesavoir: '',
MSS: ''

   }

displayedColumns = [
'IdentifiantPP',
'Prenom',
'Nom',
'Libellesavoir',
'MSS'];

dataSource = new MatTableDataSource();

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

@ViewChild(MatPaginator) paginator: MatPaginator;

ngAfterViewInit() {this.dataSource.paginator = this.paginator;}


ngOnInit(){ return this.annuairesService.getMedecins().subscribe(res => this.dataSource.data = res);}

constructor( private annuairesService: AnnuairesService, private router: Router, private database: AngularFireDatabase) {}

I think there must be solutions .. Is this problem recurring? I did not find topics on it.