How to implement an <ion-searchbar> with Firebase integration?

Hello.

I’m trying to implement an that will be used to search for people names inside my Firebase database, and if anything is found, it hides every result but the matching ones, preferably without any buttons to trigger the searches.

I’ve tried to search for websites that could help me out, but most of them are for local lists and not Firebase-driven components, and most of the YouTube videos that were for Firebase didn’t help much either.

This is my HTML code:

<!-- The searchbar itself -->
  
  <ion-searchbar color="hl1" placeholder="Search..."></ion-searchbar>

  <!-- The container that receives the info from the database and implements it into a card -->

  <ng-container *ngFor="let people of dBase">

    <ion-card color="hl2">
      <ion-card-header style="font-weight: bold">{{people.name}}</ion-card-header>
      <ion-card-content>
        <ion-button color="hl1" [routerLink]="['/profile', people.id]">PROFILE</ion-button>
        <ion-button color="hl1" [routerLink]="['/tests', people.id]">TESTS</ion-button>
      </ion-card-content>
    </ion-card>        

  </ng-container>

And this my TypeScript code:

dBase: Database[];

  constructor(private dbService: DatabaseService) { }

// This searches for every person inside my database as the page loads.

  ngOnInit() {

    this.dbService.getDatabases().subscribe(res => {

      this.dBase = res;
      
    });

  }