Use a search filter on AngularFireCollection in Ionic

Question

I have my data service code in a firestore.service.ts file:

import { Injectable } from '@angular/core';
import { AngularFirestore, 
         AngularFirestoreCollection,
         AngularFirestoreDocument 
       } from '@angular/fire/firestore';

import { Song } from '../../models/song.interface';

import { Router } from '@angular/router'

@Injectable({
  providedIn: 'root'
})
export class FirestoreService {

  constructor(public firestore: AngularFirestore, public router: Router) {}

    createSong(
        albumName: string,
        artistName: string,
        songDescription: string,
        songName: string
    ): Promise<void> {

        const id = this.firestore.createId();

        return this.firestore.doc(`songList/${id}`).set({
            id,
            albumName,
            artistName,
            songDescription,
            songName,
        });
    }

  getSongList(): AngularFirestoreCollection<Song> {
  return this.firestore.collection(`songList`);
  }

  getSongDetail(songId: string): AngularFirestoreDocument<Song> {
  return this.firestore.collection('songList').doc(songId);
  }

}

My homepage that displays the list is home.page.ts:

import { Component } from '@angular/core';

import { AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { Song } from '../models/song.interface';
import { FirestoreService } from '../services/data/firestore.service';

import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

    public songList: AngularFirestoreCollection<Song>;
    public loadedSongList : AngularFirestoreCollection<Song>;

    constructor(
        private firestoreService: FirestoreService,
        private router: Router
        ) {}


    ngOnInit() {
        this.songList = this.firestoreService.getSongList().valueChanges();
        this.loadedSongList = this.songList;
    }

    initializeItems(): void {
        this.songList = this.loadedSongList;
    }


    filterList(evt) {
        this.initializeItems();

        const searchTerm = evt.srcElement.value;

        if (!searchTerm) {
            return;
        }

    this.songList = this.songList.filter(currentSong => {
        if (currentSong.songName && searchTerm) {
            if (currentSong.songName.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1) {
                return true;
            }
        return false;
            }
        });
    }

}

And my list is displayed in home.page.html like so:

<ion-header>
  <ion-toolbar>
    <ion-title>Song List</ion-title>
    <ion-buttons slot="end">
      <ion-button routerLink="/create">
        <ion-icon slot="icon-only" name="add"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-searchbar
    showcancelbutton=""
    (ioninput)="filterList($event)"
  ></ion-searchbar>
  <ion-card
    *ngFor="let song of songList | async"
    routerLink="/detail/{{song.id}}"
  >
    <ion-card-header>
      {{ song.songName }}
    </ion-card-header>
    <ion-card-content>
      Artist Name: {{ song.artistName }}
    </ion-card-content>
  </ion-card>
</ion-content>

Only problem is my search bar does not work at all. There are no errors thrown either. I've tried changing it and subscribing to the AngularFirestoreCollection before hand instead of the async pipe, but I'm having major errors with Ovservable vs Array type problems. I was just wondering if someone could help me see where I'm going wrong so the search bar works for me. I can display the data with no issues with my current code.

Any help would be greatly appreciated.