LimitToFirst AngularFire Observable

I use angular CLI 6, angularfire2 and firebase.

I sotck and display my data with angularfire2. But i have a lot of data and my table is too long to load. So, I want use limitToFirst()ongetMedecins()

I'm getting the following error:

Property 'limitToFirst' does not exist on type 'AngularFireList'.

Someone can show me how can I use this function?

 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('annuaire');  }

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

    }

And my component :

Component.ts

    import { Component, OnDestroy, OnInit, ViewChild, ChangeDetectorRef} from '@angular/core';
    import { AnnuairesService } from '../services/annuaires.service';

    import { Subscription } from 'rxjs';
    import { Observable } from 'rxjs';
    import { Router } from '@angular/router';
    import { MatPaginator, MatTableDataSource } from '@angular/material';
    import { MatSort } from '@angular/material';
    import { DataSource } from '@angular/cdk/table';
    import { AngularFireDatabase, AngularFireList, AngularFireObject} from 'angularfire2/database';

    @Component({
      selector: 'app-med-list',
      templateUrl: './med-list.component.html',
      styleUrls: ['./med-list.component.scss']
    })

    export class MedListComponent   {

      Medecin = {
    IdentifiantPP: '',
    Prenom: '',
    Nom: '',
    Libellesavoir: '',
    Etablissement: '',
    Contact: ''  }

    displayedColumns = [
    'IdentifiantPP',
    'Prenom',
    'Nom',
    'Libellesavoir',
    'Etablissement',
    'Contact'
    ];

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

    export class PatientDataSource extends DataSource<any> {

    constructor(private annuairesService: AnnuairesService) { super() }

    connect() {return this.annuairesService.getMedecins();}
     disconnect() {}

    }

Component.html :

<div class="grid-container" >
    <mat-card>
    <mat-form-field appearance="outline"  >
      <input matInput (keyup)="applyFilter($event.target.value)"  >
        <mat-label>Rechercher un professionnel</mat-label>
    </mat-form-field>

    <div >

    <table mat-table  [dataSource]="dataSource"  class="mat-elevation-z8">

        <ng-container matColumnDef="IdentifiantPP">
        <th mat-header-cell *matHeaderCellDef> Code RPPS</th>
        <td mat-cell *matCellDef="let element">  {{element.IdentifiantPP}}</td>
      </ng-container>

      <ng-container matColumnDef="Prenom">
        <th mat-header-cell *matHeaderCellDef> Prénom </th>
        <td mat-cell *matCellDef="let element"  > {{element.Prenom}} </td>
      </ng-container>

      <ng-container matColumnDef="Nom">
        <th mat-header-cell *matHeaderCellDef> Nom </th>
        <td mat-cell *matCellDef="let element">  {{element.Nom}}</td>
      </ng-container>

      <ng-container matColumnDef="Libellesavoir">
        <th mat-header-cell *matHeaderCellDef> Spécialité</th>
        <td mat-cell *matCellDef="let element">  {{element.Libellesavoir}}</td>
      </ng-container>

        <ng-container matColumnDef="Etablissement">
        <th mat-header-cell *matHeaderCellDef> Etablissement</th>
        <td mat-cell *matCellDef="let element">  {{element.Etablissement}}</td>
      </ng-container>

       <ng-container matColumnDef="Contact">
        <th mat-header-cell *matHeaderCellDef> Contact</th>
        <td mat-cell *matCellDef="let element">  {{element.Contact}}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index" 

       ></tr>

       </table>    
     <mat-paginator [pageSizeOptions]="[10, 25, 50]" showFirstLastButtons></mat-paginator>
           </div>

    </mat-card>
    </div>

Try this it should work

  constructor(private database: AngularFireDatabase) 
    {
    this.medecins = database.list('annuaire',ref=>ref.limitToFirst(10)); 
     }