Componente Footer y funcionalidad del Modal

Uso de modal onDidDismiss

modal.onDidDismiss().then(dataReturned=>{
    this.song = dataReturned.data;
})

Me ha gustado mucho el curso, muy completo. Me gustaría que lo actualizaran a IONIC 6

aplicamos unos cambios a nuestro ts del home page

home.page.ts

// Recomiendo crear una interface de tipo Song para evitar errores futuros, esto es previo al decorador @component
interface Song {
 name?: string;
}


// esta es una variable para tomar el objeto resultante despues de salir del modal

song: Song = {
 name: ''
 };

async modalSong(songs, artist) {
 const modal = await this.modalController.create({
 component: SongsModalPage,
 componentProps: {
 songs: songs.tracks,
 artist: artist.name
 }
 });

 modal.onDidDismiss().then(dataReturned => {
 this.song = dataReturned.data;
 });
 return modal.present();
 }

Ingresamos nuestro footer en el page de home con el nombre la canción

home.page.html

<ion-footer>
 <ion-text color="danger" *ngIf="!song?.name">
 <h2>Aquí aparecerá nuestra canción</h2>
 </ion-text>
 <ion-text color="primary" *ngIf="song?.name">
 <h2>{{ song?.name }}</h2>
 </ion-text>
</ion-footer>

Al entrar a la age de un artista, y salir dandole al boton de cerrar me genera un error el cual me dice que la variable song esta indefinida, por ello en dentro del modal.onDidDismiss he agregado una condicional, quedaria de la siguiente manera:

modal.onDidDismiss().then(dataReturned=>{
      if (dataReturned.data == null) {
        this.song = {};
      } else {
        this.song = dataReturned.data;
      }
      console.log(this.song)
});```