¬ŅQu√© es Ionic?

1

Requisitos del curso y presentación del proyecto

2

¬ŅQu√© hay de nuevo en Ionic 4?

3

¬ŅQu√© ha cambiado en Ionic?

4

Instalación de Ionic y templates básicos

5

Instalación de Capacitor y uso en Android Studio

6

Uso de Capacitor y xCode

7

Sincronizando nuestro proyecto con los emuladores

Componentes b√°sicos de Ionic

8

El componente Slides

9

CSS y Custom Properties de los componentes de Ionic

10

Slides din√°micos

11

Angular Router e Ionic Storage

12

Controlar la navegación con Guards

13

Utilidades de CSS con Ionic

14

Crear una p√°gina de login

15

Validar inputs del formulario de login

16

Envío del formulario

17

Servicio para validar credenciales

18

Agregar Guards a nuestro login

19

Crear una p√°gina de registro

20

Navegación entre login y registro

21

Agregar un men√ļ con el componente Menu

22

Dar funcionalidad y estilos al men√ļ

23

Uso de componente Slides y opciones avanzadas

Consumo y manejo de informacion con Ionic

24

Consumiendo un API para llenar información de nuestros artistas

25

P√°gina completa con artistas, canciones y √°lbums

26

El componente Modal y el Modal Controller

27

Llenar de contenido el Modal

28

Componente Footer y funcionalidad del Modal

29

Construyendo nuestro reproductor

30

Lógica de nuestro reproductor

31

RETO: Vista de √°lbums

Acceso al hardware

32

Usar la cámara a través de Capacitor

33

Corrección de errores y afinando detalles

34

Mejorando nuestra p√°gina de Settings con CSS

35

P√°gina Sports y Angular Maps

36

Crear la p√°gina Sport

37

RETO: Buscador din√°mico en Sports

38

Llevar nuestra aplicación a producción con Android

39

Llevar nuestra aplicación a producción con iOS y cierre del curso

A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Curso de Ionic 4

Curso de Ionic 4

Sebastián Gómez

Sebastián Gómez

Llenar de contenido el Modal

27/39
Recursos

Aportes 16

Preguntas 1

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

navParams ha sido removido en Ionic 4 ( https://forum.ionicframework.com/t/ionic-4-navparams-alternative/136679 ) aqui se propone la solucion de utilizar mejor un service con getter y setter, creo que esa seria la mejor solucion

IONIC 6

Todo sigue funcionando igual a como lo explico el profesor, lo √ļnico que marcaba un error era el bot√≥n que cierra la ventana modal, fue necesario enviar un vac√≠o en la funci√≥n as√≠:

<ion-button (click)="selectSong('')">Cerrar</ion-button>

estupendo!!!

muy bien, mas adelante se le podr√° dar un dise√Īo a la lista?

y si quieres tener un solo modal y no enviar props sino ya contenido como un children como lo hacemos existe algo componentChildren¬Ņ?

Profe, se puede cambiar el tama√Īo del modal o es otro componente. Vi en una aplicaci√≥n una ventana emergente con informaci√≥n pero no ocupaba toda la pantalla es el componente modal?

Buenas tardes profesor Sebastian, este servicio aun funciona?
https://platzi-music-api.now.sh/artists/${artistId}/top-tracks?country=CO
ya que sale error de id de usuario

vamos a cambiar el page ts de nuestro songs modal para que por medio de los parametros recibidos desde el home.page se pueda observar las canciones y el artista seleccionado

songs-modal.page.ts

import { Component } from '@angular/core';
import { ModalController, NavParams } from '@ionic/angular';

@Component({
 selector: 'app-songs-modal',
 templateUrl: './songs-modal.page.html',
 styleUrls: ['./songs-modal.page.scss'],
})
export class SongsModalPage {
 songs: any[] = [];
 artist = '';

 constructor(
	 private navParams: NavParams,
	 private modalController: ModalController
 ) { }

 ionViewDidEnter() {
	 this.songs = this.navParams.data.songs;
	 this.artist = this.navParams.data.artist;
 }

 async selectSong(song) {
	 await this.modalController.dismiss(song);
 }
}

ingresamos la información maquetada a nuestro a html del modal songs-modal

songs-modal.page.html

<ion-header>
	 <ion-toolbar>
		 <ion-title>{{artist + ' - Top tracks'}}</ion-title>
		 <ion-buttons slot="end">
			 <ion-button (click)="selectSong('')">Cerrar</ion-button>
		 </ion-buttons>
	 </ion-toolbar>
</ion-header>

<ion-content>
	 <ion-list>
		 <ion-item *ngFor="let song of songs; index as i" (click)="selectSong(song)">
			 <ion-avatar>
				 {{i+1}}
				 <ion-label>
					 <h2>{{ song.name }}</h2>
					 <p>{{ song.popularity }}</p>
				 </ion-label>
			 </ion-avatar>
		 </ion-item>
	 </ion-list>
</ion-content>

finalmente estilizamos nuestro songs-modal desde el scss

songs-modal.page.scss

ion-avatar {
 width: 100%;
 display: grid;
 grid-template-columns: 20px auto;
 align-items: center;
}

  

ion-avatar ion-label {
 display: grid;
 grid-template-rows: auto auto;
 transform: translateX(15px);
}

Tal y cómo pasa los parámetros al modal no me funcionaba. En su lugar hice esto:

async showSongs(artist){
    const songs = await this.musicService.getArtistTopTracks(artist.id);
    const modal = await this.modalController.create({
      component: SongsModalPage,
      componentProps: {
        songs: songs.tracks,
        artist: artist.name
      }
    });
    return await modal.present();
  }
export class SongsModalPage {

  @Input() songs: any[];
  @Input() artist: string;

  constructor(
    private modalController: ModalController
  ) { }

  ionViewDidEnter(){
  }

  async selectSong(song){
    await this.modalController.dismiss(song);
  }
}

Fuente: IonicDoc

El profesor dijo ‚ÄúDebemos tener en cuenta que estamos trabajando con Ionic y no con Angular‚ÄĚ . De Ionic 4 en adelante, se trabaja realmente es con Angular o con Vue o con React. Hoy en dia (2022), se trabaja es con Ionic 6. Aunque hay cosas que todavia funcionan como el NavParam (segun comentan por aqui), la verdad es que el equipo de Ionic no recomienda trabajar con eso. Si vas a usar Angular como base, te recomienda que utilizes las herramientas que Angular trae. Ionic hoy en dia es un Framework de UI (muy similar a Bootstrap, Bulma, etc. ). De hecho, al adoptar Capacitor, se separa Ionic como Framework de las funcionalidades de generar apps moviles‚Ķlo que genera al final en la carpeta www es un bundle de una web. Este curso hay que actualizarlo porque se trabaja con un enfoque que se perdio en Ionic 3.

No funciona el enlace: https://platzi-music-api.now.sh/${artists}/top-tracks?country=CO

Ej: https://platzi-music-api.now.sh/3YQKmKGau1PzlVlkL1iodx/top-tracks?country=CO

Result: {‚Äúerror‚ÄĚ:{‚Äústatus‚ÄĚ:404,‚Äúmessage‚ÄĚ:‚ÄúService not found‚ÄĚ}}

http://davidpots.com/jakeworry/017%20JSON%20Grouping,%20part%203/data.json

{"songs":[{"title":"1904","artist":"The Tallest Man on Earth","year":"2012","web_url":"http://www.songnotes.cc/songs/78-the-tallest-man-on-earth-1904","img_url":"http://fireflygrove.com/songnotes/images/artists/TheTallestManOnEarth.jpg"},{"title":"#40","artist":"Dave Matthews","year":"1999","web_url":"http://www.songnotes.cc/songs/119-dave-matthews-40","img_url":"http://fireflygrove.com/songnotes/images/artists/DaveMatthews.jpg"},{"title":"40oz to Freedom","artist":"Sublime","year":"1996","web_url":"http://www.songnotes.cc/songs/45-sublime-40oz-to-freedom","img_url":"http://fireflygrove.com/songnotes/images/artists/Sublime.png"},{"title":"#41","artist":"Dave Matthews","year":"1996","web_url":"http://www.songnotes.cc/songs/46-dave-matthews-band-41","img_url":"http://fireflygrove.com/songnotes/images/artists/DaveMatthews.jpg"},{"title":"American Girl","artist":"Tom Petty","year":"1977","web_url":"http://www.songnotes.cc/songs/86-tom-petty-american-girl","img_url":"http://fireflygrove.com/songnotes/images/artists/TomPetty.png"},{"title":"American Music","artist":"Violent Femmes","year":"1991","web_url":"http://www.songnotes.cc/songs/123-violent-femmes-american-music","img_url":"http://fireflygrove.com/songnotes/images/artists/ViolentFemmes.jpg"},{"title":"American Pie","artist":"Don McLean","year":"1972","web_url":"http://www.songnotes.cc/songs/132-don-mclean-american-pie","img_url":"http://fireflygrove.com/songnotes/images/artists/DonMcLean.jpg"},{"title":"And it Stoned Me","artist":"Van Morrison","year":"1970","web_url":"http://www.songnotes.cc/songs/27-van-morrison-and-it-stoned-me","img_url":"http://fireflygrove.com/songnotes/images/artists/VanMorrison.jpg"},{"title":"A Sailor's Christmas","artist":"Jimmy Buffett","year":"1996","web_url":"http://www.songnotes.cc/songs/11-jimmy-buffett-a-sailors-christmas","img_url":"http://fireflygrove.com/songnotes/images/artists/JimmyBuffett.png"},{"title":"Badfish","artist":"Sublime","year":"1996","web_url":"http://www.songnotes.cc/songs/21-sublime-badfish","img_url":"http://fireflygrove.com/songnotes/images/artists/Sublime.png"},{"title":"Banana Pancakes","artist":"Jack Johnson","year":"2005","web_url":"http://www.songnotes.cc/songs/102-jack-johnson-banana-pancakes","img_url":"http://fireflygrove.com/songnotes/images/artists/JackJohnson.png"},{"title":"Barefoot Children","artist":"Jimmy Buffett","year":"1995","web_url":"http://www.songnotes.cc/songs/9-jimmy-buffett-barefoot-children","img_url":"http://fireflygrove.com/songnotes/images/artists/JimmyBuffett.png"},{"title":"Big Parade","artist":"The Lumineers","year":"2012","web_url":"http://www.songnotes.cc/songs/63-the-lumineers-big-parade","img_url":"http://fireflygrove.com/songnotes/images/artists/TheLumineers.png"},{"title":"Brown Eyed Girl","artist":"Van Morrison","year":"1967","web_url":"http://www.songnotes.cc/songs/69-van-morrison-brown-eyed-girl","img_url":"http://fireflygrove.com/songnotes/images/artists/VanMorrison.jpg"},{"title":"Cape Canaveral","artist":"Conor Oberst","year":"2008","web_url":"http://www.songnotes.cc/songs/75-conor-oberst-cape-canaveral","img_url":"http://fireflygrove.com/songnotes/images/artists/ConorOberst.jpg"},{"title":"Carry On","artist":"fun.","year":"2012","web_url":"http://www.songnotes.cc/songs/122-fun-carry-on","img_url":"http://fireflygrove.com/songnotes/images/artists/Fun.png"},{"title":"Catch the Wind","artist":"Donovan","year":"1965","web_url":"http://www.songnotes.cc/songs/131-donovan-catch-the-wind","img_url":"http://fireflygrove.com/songnotes/images/artists/Donovan.jpg"},{"title":"Cat's in the Cradle","artist":"Harry Chapin","year":"1974","web_url":"http://www.songnotes.cc/songs/47-harry-chapin-cats-in-the-cradle","img_url":"http://fireflygrove.com/songnotes/images/artists/HarryChapin.jpg"},{"title":"Changes in Latitudes, Changes in Attitudes","artist":"Jimmy Buffett","year":"1977","web_url":"http://www.songnotes.cc/songs/38-jimmy-buffett-changes-in-latitudes-changes-in-attitudes","img_url":"http://fireflygrove.com/songnotes/images/artists/JimmyBuffett.png"},{"title":"Classy Girls","artist":"The Lumineers","year":"2012","web_url":"http://www.songnotes.cc/songs/55-the-lumineers-classy-girls","img_url":"http://fireflygrove.com/songnotes/images/artists/TheLumineers.png"},{"title":"Creep","artist":"Radiohead","year":"1993","web_url":"http://www.songnotes.cc/songs/36-radiohead-creep","img_url":"http://fireflygrove.com/songnotes/images/artists/Radiohead.jpg"},{"title":"Danny Boy","artist":"Johnny Cash","year":"2002","web_url":"http://www.songnotes.cc/songs/92-johnny-cash-danny-boy","img_url":"http://fireflygrove.com/songnotes/images/artists/JohnnyCash.png"},{"title":"Darkness Between the Fireflies","artist":"Mason Jennings","year":"1997","web_url":"http://www.songnotes.cc/songs/16-mason-jennings-darkness-between-the-fireflies","img_url":"http://fireflygrove.com/songnotes/images/artists/MasonJennings.jpg"},{"title":"Dead Sea","artist":"The Lumineers","year":"2012","web_url":"http://www.songnotes.cc/songs/98-the-lumineers-dead-sea","img_url":"http://fireflygrove.com/songnotes/images/artists/TheLumineers.png"},{"title":"Distantly in Love","artist":"Jimmy Buffett","year":"1983","web_url":"http://www.songnotes.cc/songs/35-jimmy-buffett-distantly-in-love","img_url":"http://fireflygrove.com/songnotes/images/artists/JimmyBuffett.png"},{"title":"Don't Leave Me (Ne Me Quitte Pas)","artist":"Regina Spektor","year":"2012","web_url":"http://www.songnotes.cc/songs/77-regina-spektor-dont-leave-me-no-me-quitte-pas","img_url":"http://fireflygrove.com/songnotes/images/artists/ReginaSpektor.jpg"},{"title":"Don't Look Back in Anger","artist":"Oasis","year":"1996","web_url":"http://www.songnotes.cc/songs/100-oasis-dont-look-back-in-anger","img_url":"http://fireflygrove.com/songnotes/images/artists/Oasis.png"},{"title":"Don't Stop Believin'","artist":"Journey","year":"1981","web_url":"http://www.songnotes.cc/songs/60-journey-dont-stop-believing","img_url":"http://fireflygrove.com/songnotes/images/artists/Journey.jpg"},{"title":"Doomsday","artist":"Elvis Perkins","year":"2009","web_url":"http://www.songnotes.cc/songs/120-elvis-perkins-doomsday","img_url":"http://fireflygrove.com/songnotes/images/artists/ElvisPerkins.jpg"},{"title":"Do You Remember","artist":"Jack Johnson","year":"2005","web_url":"http://www.songnotes.cc/songs/3-jack-johnson-do-you-remember","img_url":"http://fireflygrove.com/songnotes/images/artists/JackJohnson.png"},{"title":"Drink the Water","artist":"Jack Johnson","year":"2001","web_url":"http://www.songnotes.cc/songs/32-jack-johnson-drink-the-water","img_url":"http://fireflygrove.com/songnotes/images/artists/JackJohnson.png"},{"title":"Emmylou","artist":"First Aid Kit","year":"2012","web_url":"http://www.songnotes.cc/songs/74-first-aid-kit-emmylou","img_url":"http://fireflygrove.com/songnotes/images/artists/FirstAidKit.png"},{"title":"Fall Line","artist":"Jack Johnson","year":"2003","web_url":"http://www.songnotes.cc/songs/30-jack-johnson-fall-line","img_url":"http://fireflygrove.com/songnotes/images/artists/JackJohnson.png"},{"title":"Father and Son","artist":"Cat Stevens","year":"1970","web_url":"http://www.songnotes.cc/songs/28-cat-stevens-father-and-son","img_url":"http://fireflygrove.com/songnotes/images/artists/CatStevens.jpg"},{"title":"Flake","artist":"Jack Johnson","year":"2001","web_url":"http://www.songnotes.cc/songs/104-jack-johnson-flake","img_url":"http://fireflygrove.com/songnotes/images/artists/JackJohnson.png"},{"title":"Flapper Girl","artist":"The Lumineers","year":"2012","web_url":"http://www.songnotes.cc/songs/101-the-lumineers-flapper-girl","img_url":"http://fireflygrove.com/songnotes/images/artists/TheLumineers.png"},{"title":"Flowers in Your Hair","artist":"The Lumineers","year":"2012","web_url":"http://www.songnotes.cc/songs/96-the-lumineers-flowers-in-your-hair","img_url":"http://fireflygrove.com/songnotes/images/artists/TheLumineers.png"},{"title":"Folsom Prison Blues","artist":"Johnny Cash","year":"1957","web_url":"http://www.songnotes.cc/songs/108-johnny-cash-folsom-prison-blues","img_url":"http://fireflygrove.com/songnotes/images/artists/JohnnyCash.png"},{"title":"Free Fallin'","artist":"Tom Petty","year":"1989","web_url":"http://www.songnotes.cc/songs/84-tom-petty-free-fallin","img_url":"http://fireflygrove.com/songnotes/images/artists/TomPetty.png"},{"title":"Furr","artist":"Blitzen Trapper","year":"2008","web_url":"http://www.songnotes.cc/songs/10-blitzen-trapper-furr","img_url":"http://fireflygrove.com/songnotes/images/artists/BlitzenTrapper.jpg"},{"title":"Get Well Cards","artist":"Conor Oberst","year":"2008","web_url":"http://www.songnotes.cc/songs/54-conor-oberst-get-well-cards","img_url":"http://fireflygrove.com/songnotes/images/artists/ConorOberst.jpg"},{"title":"Gulf Coast Highway","artist":"Emmylou Harris","year":"2000","web_url":"http://www.songnotes.cc/songs/50-emmylou-harris-gulf-coast-highway","img_url":"http://fireflygrove.com/songnotes/images/artists/EmmylouHarris.jpg"},{"title":"Half Light I","artist":"Arcade Fire","year":"2010","web_url":"http://www.songnotes.cc/songs/29-arcade-fire-half-light-i","img_url":"http://fireflygrove.com/songnotes/images/artists/ArcadeFire.jpg"},{"title":"Half Light II (No Celebration)","artist":"Arcade Fire","year":"2010","web_url":"http://www.songnotes.cc/songs/12-arcade-fire-half-light-ii-no-celebration","img_url":"http://fireflygrove.com/songnotes/images/artists/ArcadeFire.jpg"},{"title":"Harvest","artist":"Neil Young","year":"1972","web_url":"http://www.songnotes.cc/songs/71-neil-young-harvest","img_url":"http://fireflygrove.com/songnotes/images/artists/NeilYoung.png"},{"title":"Heart of Gold","artist":"Neil Young","year":"1972","web_url":"http://www.songnotes.cc/songs/72-neil-young-heart-of-gold","img_url":"http://fireflygrove.com/songnotes/images/artists/NeilYoung.png"},{"title":"Here I Go Again","artist":"Whitesnake","year":"1982","web_url":"http://www.songnotes.cc/songs/130-whitesnake-here-i-go-again","img_url":"http://fireflygrove.com/songnotes/images/artists/Whitesnake.jpg"},{"title":"Hey Jealousy","artist":"Gin Blossoms","year":"1992","web_url":"http://www.songnotes.cc/songs/41-gin-blossoms-hey-jealousy","img_url":"http://fireflygrove.com/songnotes/images/artists/GinBlossoms.jpg"},{"title":"Hey Soul Sister","artist":"Train","year":"2009","web_url":"http://www.songnotes.cc/songs/129-train-hey-soul-sister","img_url":"http://fireflygrove.com/songnotes/images/artists/Train.jpg"},{"title":"High and Dry","artist":"Radiohead","year":"1995","web_url":"http://www.songnotes.cc/songs/37-radiohead-high-and-dry","img_url":"http://fireflygrove.com/songnotes/images/artists/Radiohead.jpg"},{"title":"Ho Hey","artist":"The Lumineers","year":"2012","web_url":"http://www.songnotes.cc/songs/34-the-lumineers-ho-hey","img_url":"http://fireflygrove.com/songnotes/images/artists/TheLumineers.png"},{"title":"Hollywood Forever Cemetery Sings","artist":"Father John Misty","year":"2012","web_url":"http://www.songnotes.cc/songs/114-father-john-misty-hollywood-forever-cemetery-sings","img_url":"http://fireflygrove.com/songnotes/images/artists/FatherJohnMisty.jpg"},{"title":"Home","artist":"Edward Sharpe & The Magnetic Zeros","year":"2009","web_url":"http://www.songnotes.cc/songs/93-edward-sharpe-magnetic-zeros-home","img_url":"http://fireflygrove.com/songnotes/images/artists/EdwardSharpeAndTheMagneticZeroes.png"},{"title":"Honey Do","artist":"Jimmy Buffett","year":"1983","web_url":"http://www.songnotes.cc/songs/97-jimmy-buffett-honey-do","img_url":"http://fireflygrove.com/songnotes/images/artists/JimmyBuffett.png"},{"title":"Hospitals and Jails","artist":"Mason Jennings","year":"2002","web_url":"http://www.songnotes.cc/songs/113-mason-jennings-hospitals-and-jails","img_url":"http://fireflygrove.com/songnotes/images/artists/MasonJennings.jpg"},{"title":"Hotel California","artist":"The Eagles","year":"1977","web_url":"http://www.songnotes.cc/songs/56-the-eagles-hotel-california","img_url":"http://fireflygrove.com/songnotes/images/artists/TheEagles.jpg"},{"title":"Hotel Yorba","artist":"The White Stripes","year":"2001","web_url":"http://www.songnotes.cc/songs/57-the-white-stripes-hotel-yorba","img_url":"http://fireflygrove.com/songnotes/images/artists/TheWhiteStripes.jpg"},{"title":"I Feel Home","artist":"OAR","year":"1999","web_url":"http://www.songnotes.cc/songs/42-oar-i-feel-home","img_url":"http://fireflygrove.com/songnotes/images/artists/OAR.jpg"},{"title":"I Knew You Were Trouble","artist":"Taylor Swift","year":"2012","web_url":"http://www.songnotes.cc/songs/85-taylor-swift-i-knew-you-were-trouble","img_url":"http://fireflygrove.com/songnotes/images/artists/TaylorSwift.png"},{"title":"I'm Writing a Novel","artist":"Father John Misty","year":"2012","web_url":"http://www.songnotes.cc/songs/111-father-john-misty-im-writing-a-novel","img_url":"http://fireflygrove.com/songnotes/images/artists/FatherJohnMisty.jpg"},{"title":"Island in the Sun","artist":"Weezer","year":"2001","web_url":"http://www.songnotes.cc/songs/43-weezer-island-in-the-sun","img_url":"http://fireflygrove.com/songnotes/images/artists/Weezer.jpg"},{"title":"I Won't Give Up","artist":"Jason Mraz","year":"2012","web_url":"http://www.songnotes.cc/songs/107-jason-mraz-i-wont-give-up","img_url":"http://fireflygrove.com/songnotes/images/artists/JasonMraz.png"},{"title":"Jack & Diane","artist":"John Mellencamp","year":"1982","web_url":"http://www.songnotes.cc/songs/99-john-mellencamp-jack-and-diane","img_url":"http://fireflygrove.com/songnotes/images/artists/JohnMellencamp.png"},{"title":"Karma Police","artist":"Radiohead","year":"1997","web_url":"http://www.songnotes.cc/songs/14-radiohead-karma-police","img_url":"http://fireflygrove.com/songnotes/images/artists/Radiohead.jpg"},{"title":"King of Spain","artist":"The Tallest Man on Earth","year":"2010","web_url":"http://www.songnotes.cc/songs/80-the-tallest-man-on-earth-king-of-spain","img_url":"http://fireflygrove.com/songnotes/images/artists/TheTallestManOnEarth.jpg"},{"title":"King of the World","artist":"First Aid Kit","year":"2012","web_url":"http://www.songnotes.cc/songs/76-first-aid-kit-king-of-the-world","img_url":"http://fireflygrove.com/songnotes/images/artists/FirstAidKit.png"},{"title":"Lean On Me","artist":"Bill Withers","year":"1972","web_url":"http://www.songnotes.cc/songs/83-bill-withers-lean-on-me","img_url":"http://fireflygrove.com/songnotes/images/artists/BillWithers.png"},{"title":"Little Talks","artist":"Of Monsters and Men","year":"2012","web_url":"http://www.songnotes.cc/songs/105-of-monsters-and-men-little-talks","img_url":"http://fireflygrove.com/songnotes/images/artists/OfMonstersAndMen.png"},{"title":"Live and Die","artist":"The Avett Brothers","year":"2012","web_url":"http://www.songnotes.cc/songs/115-the-avett-brothers-live-and-die","img_url":"http://fireflygrove.com/songnotes/images/artists/AvettBrothers.jpg"},{"title":"Lola","artist":"The Kinks","year":"1970","web_url":"http://www.songnotes.cc/songs/128-the-kinks-lola","img_url":"http://fireflygrove.com/songnotes/images/artists/Kinks.jpg"},{"title":"Lonesome Town","artist":"Ricky Nelson","year":"1958","web_url":"http://www.songnotes.cc/songs/126-ricky-nelson-lonesome-town","img_url":"http://fireflygrove.com/songnotes/images/artists/RickyNelson.jpg"},{"title":"Love in the Library","artist":"Jimmy Buffett","year":"1994","web_url":"http://www.songnotes.cc/songs/23-jimmy-buffett-love-in-the-library","img_url":"http://fireflygrove.com/songnotes/images/artists/JimmyBuffett.png"},{"title":"Love Story","artist":"Taylor Swift","year":"2008","web_url":"http://www.songnotes.cc/songs/61-taylor-swift-love-story","img_url":"http://fireflygrove.com/songnotes/images/artists/TaylorSwift.png"},{"title":"Margaritaville","artist":"Jimmy Buffett","year":"1977","web_url":"http://www.songnotes.cc/songs/62-jimmy-buffett-margaritaville","img_url":"http://fireflygrove.com/songnotes/images/artists/JimmyBuffett.png"},{"title":"Me and Julio Down by the Schoolyard","artist":"Paul Simon","year":"1972","web_url":"http://www.songnotes.cc/songs/31-paul-simon-me-and-julio-down-by-the-schoolyard","img_url":"http://fireflygrove.com/songnotes/images/artists/PaulSimon.jpg"},{"title":"Migration","artist":"Jimmy Buffett","year":"1974","web_url":"http://www.songnotes.cc/songs/66-jimmy-buffett-migration","img_url":"http://fireflygrove.com/songnotes/images/artists/JimmyBuffett.png"},{"title":"Moonshadow","artist":"Cat Stevens","year":"1971","web_url":"http://www.songnotes.cc/songs/73-cat-stevens-moonshadow","img_url":"http://fireflygrove.com/songnotes/images/artists/CatStevens.jpg"},{"title":"Mudfootball","artist":"Jack Johnson","year":"2001","web_url":"http://www.songnotes.cc/songs/59-jack-johnson-mudfootball","img_url":"http://fireflygrove.com/songnotes/images/artists/JackJohnson.png"},{"title":"My Antonia","artist":"Emmylou Harris","year":"2000","web_url":"http://www.songnotes.cc/songs/51-emmylou-harris-my-antonia","img_url":"http://fireflygrove.com/songnotes/images/artists/EmmylouHarris.jpg"},{"title":"New Realization","artist":"Sublime","year":"1996","web_url":"http://www.songnotes.cc/songs/39-sublime-new-realization","img_url":"http://fireflygrove.com/songnotes/images/artists/Sublime.png"},{"title":"No Surprises","artist":"Radiohead","year":"1997","web_url":"http://www.songnotes.cc/songs/52-radiohead-no-surprises","img_url":"http://fireflygrove.com/songnotes/images/artists/Radiohead.jpg"},{"title":"Nothing","artist":"Mason Jennings","year":"1997","web_url":"http://www.songnotes.cc/songs/15-mason-jennings-nothing","img_url":"http://fireflygrove.com/songnotes/images/artists/MasonJennings.jpg"},{"title":"Nothing Else Matters","artist":"Metallica","year":"1992","web_url":"http://www.songnotes.cc/songs/58-metallica-nothing-else-matters","img_url":"http://fireflygrove.com/songnotes/images/artists/Metallica.jpg"},{"title":"Only Son of the Ladiesman","artist":"Father John Misty","year":"2012","web_url":"http://www.songnotes.cc/songs/124-father-john-misty-only-son-of-the-ladiesman","img_url":"http://fireflygrove.com/songnotes/images/artists/FatherJohnMisty.jpg"},{"title":"Out on the Weekend","artist":"Neil Young","year":"1972","web_url":"http://www.songnotes.cc/songs/70-neil-young-out-on-the-weekend","img_url":"http://fireflygrove.com/songnotes/images/artists/NeilYoung.png"},{"title":"Party in the USA","artist":"Miley Cyrus","year":"2009","web_url":"http://www.songnotes.cc/songs/8-miley-cyrus-party-in-the-usa","img_url":"http://fireflygrove.com/songnotes/images/artists/MileyCyrus.jpg"},{"title":"Patience","artist":"Guns N' Roses","year":"1989","web_url":"http://www.songnotes.cc/songs/95-guns-n-roses-patience","img_url":"http://fireflygrove.com/songnotes/images/artists/GunsNRoses.png"},{"title":"Redemption Song","artist":"Bob Marley","year":"1980","web_url":"http://www.songnotes.cc/songs/67-bob-marley-redemption-song","img_url":"http://fireflygrove.com/songnotes/images/artists/BobMarley.jpg"},{"title":"Rivers of Babylon","artist":"Sublime","year":"1998","web_url":"http://www.songnotes.cc/songs/90-sublime-rivers-of-babylon","img_url":"http://fireflygrove.com/songnotes/images/artists/Sublime.png"},{"title":"Rocket Man","artist":"Elton John","year":"1972","web_url":"http://www.songnotes.cc/songs/135-elton-john-rocket-man","img_url":"http://fireflygrove.com/songnotes/images/artists/EltonJohn.jpg"},{"title":"Rodeo Clowns","artist":"Jack Johnson","year":"2003","web_url":"http://www.songnotes.cc/songs/68-jack-johnson-rodeo-clowns","img_url":"http://fireflygrove.com/songnotes/images/artists/JackJohnson.png"},{"title":"Send My Fond Regards to Lonelyville","artist":"Elvis Perkins","year":"2009","web_url":"http://www.songnotes.cc/songs/121-elvis-perkins-send-my-fond-regards-to-lonelyville","img_url":"http://fireflygrove.com/songnotes/images/artists/ElvisPerkins.jpg"},{"title":"Sentimental Heart","artist":"She & Him","year":"2008","web_url":"http://www.songnotes.cc/songs/109-she-and-him-volume-one","img_url":"http://fireflygrove.com/songnotes/images/artists/SheAndHim.jpg"},{"title":"Shelter from the Storm","artist":"Bob Dylan","year":"1975","web_url":"http://www.songnotes.cc/songs/110-bob-dylan-shelter-from-the-storm","img_url":"http://fireflygrove.com/songnotes/images/artists/BobDylan.jpg"},{"title":"Some Nights","artist":"fun.","year":"2012","web_url":"http://www.songnotes.cc/songs/103-fun-some-nights","img_url":"http://fireflygrove.com/songnotes/images/artists/Fun.png"},{"title":"Somewhere Only We Know","artist":"Keane","year":"2004","web_url":"http://www.songnotes.cc/songs/82-keane-somewhere-only-we-know","img_url":"http://fireflygrove.com/songnotes/images/artists/Keane.jpg"},{"title":"Space Oddity","artist":"David Bowie","year":"1969","web_url":"http://www.songnotes.cc/songs/136-david-bowie-space-oddity","img_url":"http://fireflygrove.com/songnotes/images/artists/DavidBowie.jpg"},{"title":"Stay or Leave","artist":"Dave Matthews","year":"2003","web_url":"http://www.songnotes.cc/songs/48-dave-matthews-stay-or-leave","img_url":"http://fireflygrove.com/songnotes/images/artists/DaveMatthews.jpg"},{"title":"Stubborn Love","artist":"The Lumineers","year":"2012","web_url":"http://www.songnotes.cc/songs/33-the-lumineers-stubborn-love","img_url":"http://fireflygrove.com/songnotes/images/artists/TheLumineers.png"},{"title":"Stuck in the Middle With You","artist":"Stealers Wheel","year":"1972","web_url":"http://www.songnotes.cc/songs/91-stealers-wheel-stuck-in-the-middle-with-you","img_url":"http://fireflygrove.com/songnotes/images/artists/StealersWheel.png"},{"title":"Submarines","artist":"The Lumineers","year":"2012","web_url":"http://www.songnotes.cc/songs/64-the-lumineers-submarines","img_url":"http://fireflygrove.com/songnotes/images/artists/TheLumineers.png"},{"title":"Sugar Mountain","artist":"Neil Young","year":"1977","web_url":"http://www.songnotes.cc/songs/106-neil-young-sugar-mountain","img_url":"http://fireflygrove.com/songnotes/images/artists/NeilYoung.png"},{"title":"Summer of '69","artist":"Bryan Adams","year":"1984","web_url":"http://www.songnotes.cc/songs/65-bryan-adams-summer-of-69","img_url":"http://fireflygrove.com/songnotes/images/artists/BryanAdams.jpg"},{"title":"Sweet Home Alabama","artist":"Lynyrd Skynyrd","year":"1974","web_url":"http://www.songnotes.cc/songs/133-lynyrd-skynyrd-sweet-home-alabama","img_url":"http://fireflygrove.com/songnotes/images/artists/LynyrdSkynyrd.jpg"},{"title":"Tangled Up in Blue","artist":"Bob Dylan","year":"1975","web_url":"http://www.songnotes.cc/songs/22-bob-dylan-tangled-up-in-blue","img_url":"http://fireflygrove.com/songnotes/images/artists/BobDylan.jpg"},{"title":"The Drugs Don't Work","artist":"Ben Harper","year":"2001","web_url":"http://www.songnotes.cc/songs/49-ben-harper-the-drugs-dont-work","img_url":"http://fireflygrove.com/songnotes/images/artists/BenHarper.jpg"},{"title":"The General","artist":"Dispatch","year":"2000","web_url":"http://www.songnotes.cc/songs/26-dispatch-the-general","img_url":"http://fireflygrove.com/songnotes/images/artists/Dispatch.jpg"},{"title":"The Lion's Roar","artist":"First Aid Kit","year":"2012","web_url":"http://www.songnotes.cc/songs/89-first-aid-kit-the-lions-roar","img_url":"http://fireflygrove.com/songnotes/images/artists/FirstAidKit.png"},{"title":"The Man in Me","artist":"Bob Dylan","year":"1970","web_url":"http://www.songnotes.cc/songs/24-bob-dylan-the-man-in-me","img_url":"http://fireflygrove.com/songnotes/images/artists/BobDylan.jpg"},{"title":"The Mother We Share","artist":"Chvrches","year":"2013","web_url":"http://www.songnotes.cc/songs/127-chvrches-the-mother-we-share","img_url":"http://fireflygrove.com/songnotes/images/artists/Chvrches.jpg"},{"title":"The Needle and the Damage Done","artist":"Neil Young","year":"1972","web_url":"http://www.songnotes.cc/songs/87-neil-young-the-needle-and-the-damage-done","img_url":"http://fireflygrove.com/songnotes/images/artists/NeilYoung.png"},{"title":"The Weather is Here, Wish You Were Beautiful","artist":"Jimmy Buffett","year":"1981","web_url":"http://www.songnotes.cc/songs/19-jimmy-buffett-the-weather-is-here-wish-you-were-beautiful","img_url":"http://fireflygrove.com/songnotes/images/artists/JimmyBuffett.png"},{"title":"The Weight","artist":"The Band","year":"1968","web_url":"http://www.songnotes.cc/songs/40-the-band-the-weight","img_url":"http://fireflygrove.com/songnotes/images/artists/TheBand.jpg"},{"title":"Tin Cup Chalice","artist":"Jimmy Buffett","year":"1974","web_url":"http://www.songnotes.cc/songs/25-jimmy-buffett-tin-cup-chalice","img_url":"http://fireflygrove.com/songnotes/images/artists/JimmyBuffett.png"},{"title":"Tiny Dancer","artist":"Elton John","year":"1971","web_url":"http://www.songnotes.cc/songs/13-elton-john-tiny-dancer","img_url":"http://fireflygrove.com/songnotes/images/artists/EltonJohn.jpg"},{"title":"Trying to Reason with Hurricane Season","artist":"Jimmy Buffett","year":"1974","web_url":"http://www.songnotes.cc/songs/18-jimmy-buffett-trying-to-reason-with-hurricane-season","img_url":"http://fireflygrove.com/songnotes/images/artists/JimmyBuffett.png"},{"title":"Under the Milky Way","artist":"The Church","year":"1988","web_url":"http://www.songnotes.cc/songs/17-the-church-under-the-milky-way","img_url":"http://fireflygrove.com/songnotes/images/artists/TheChurch.jpg"},{"title":"Viva La Vida","artist":"Coldplay","year":"2008","web_url":"http://www.songnotes.cc/songs/53-coldplay-viva-la-vida","img_url":"http://fireflygrove.com/songnotes/images/artists/Coldplay.jpg"},{"title":"Watching the Wheels","artist":"John Lennon","year":"1981","web_url":"http://www.songnotes.cc/songs/5-john-lennon-watching-the-wheels","img_url":"http://fireflygrove.com/songnotes/images/artists/JohnLennon.jpg"},{"title":"Way Over Yonder in the Minor Key","artist":"Billy Bragg & Wilco","year":"1998","web_url":"http://www.songnotes.cc/songs/112-billy-bragg-wilco-way-over-yonder-in-the-minor-key","img_url":"http://fireflygrove.com/songnotes/images/artists/BillyBraggWilco.jpg"},{"title":"We Are Never Ever Getting Back Together","artist":"Taylor Swift","year":"2012","web_url":"http://www.songnotes.cc/songs/88-taylor-swift-we-are-never-ever-getting-back-together","img_url":"http://fireflygrove.com/songnotes/images/artists/TaylorSwift.png"},{"title":"We're Going To Be Friends","artist":"The White Stripes","year":"2001","web_url":"http://www.songnotes.cc/songs/118-the-white-stripes-we-are-going-to-be-friends","img_url":"http://fireflygrove.com/songnotes/images/artists/TheWhiteStripes.jpg"},{"title":"What I Got","artist":"Sublime","year":"1996","web_url":"http://www.songnotes.cc/songs/20-sublime-what-i-got","img_url":"http://fireflygrove.com/songnotes/images/artists/Sublime.png"},{"title":"Wind and Walls","artist":"The Tallest Man on Earth","year":"2012","web_url":"http://www.songnotes.cc/songs/79-the-tallest-man-on-earth-wind-and-walls","img_url":"http://fireflygrove.com/songnotes/images/artists/TheTallestManOnEarth.jpg"},{"title":"With a Little Help From My Friends","artist":"The Beatles","year":"1967","web_url":"http://www.songnotes.cc/songs/81-the-beatles-with-a-little-help-from-my-friends","img_url":"http://fireflygrove.com/songnotes/images/artists/TheBeatles.jpg"},{"title":"Ya Hey","artist":"Vampire Weekend","year":"2013","web_url":"http://www.songnotes.cc/songs/125-vampire-weekend-ya-hey","img_url":"http://fireflygrove.com/songnotes/images/artists/VampireWeekend.jpg"},{"title":"You Belong With Me","artist":"Taylor Swift","year":"2008","web_url":"http://www.songnotes.cc/songs/44-taylor-swift-you-belong-with-me","img_url":"http://fireflygrove.com/songnotes/images/artists/TaylorSwift.png"},{"title":"You Love Me","artist":"DeVotchKa","year":"2004","web_url":"http://www.songnotes.cc/songs/134-devotchka-you-love-me","img_url":"http://fireflygrove.com/songnotes/images/artists/DeVotchKa.jpg"}]}```

Como es que al usar la funci√≥n selectSong() para cerrar el modal este se cierra, ¬Ņionic no tiene sobre carga de m√©todos? o como es que se maneja para que se ejecute la funci√≥n de cerrar el modal aun y cuando no se le env√≠a un par√°metro D:

En Ionic 5, ahora se ve m√°s natural a recibir los parametros de component usando @Input()

topTracks.json

{
  "items": [
    {
      "id": "25z14Qw0e8uN0dIaWVe2Mk",
      "tracks": [
        { "name": "yeap1", "popularity": 10 },
        { "name": "yeap2", "popularity": 10 }
      ]
    },
    {
      "id": "05fG473iIaoy82BF1aGhL8",
      "tracks": [
        { "name": "yeap1", "popularity": 10 },
        { "name": "yeap2", "popularity": 10 }
      ]
    },
    {
      "id": "5ZNxiPcbKgaNcBrERMpqeu",
      "tracks": [
        { "name": "yeap1", "popularity": 10 },
        { "name": "yeap2", "popularity": 10 }
      ]
    },
    {
      "id": "1Qp56T7n950O3EGMsSl81D",
      "tracks": [
        { "name": "yeap1", "popularity": 71 },
        { "name": "yeap2", "popularity": 71 }
      ]
    },
    {
      "id": "0Up8AZmXDecXiMirZhRLmw",
      "tracks": [
        { "name": "yeap1", "popularity": 51 },
        { "name": "yeap2", "popularity": 51 }
      ]
    },
    {
      "id": "0yNSzH5nZmHzeE2xn6Xshb",
      "tracks": [
        { "name": "yeap1", "popularity": 75 },
        { "name": "yeap2", "popularity": 75 }
      ]
    },
    {
      "id": "6wWVKhxIU2cEi0K81v7HvP",
      "tracks": [
        { "name": "yeap1", "popularity": 85 },
        { "name": "yeap2", "popularity": 85 }
      ]
    },
    {
      "id": "5lwmRuXgjX8xIwlnauTZIP",
      "tracks": [
        { "name": "yeap1", "popularity": 86 },
        { "name": "yeap2", "popularity": 86 }
      ]
    },
    {
      "id": "1dfeR4HaWDbWqFHLkxsg1d",
      "tracks": [
        { "name": "yeap1", "popularity": 92 },
        { "name": "yeap2", "popularity": 92 }
      ]
    },
    {
      "id": "1r4hJ1h58CWwUQe3MxPuau",
      "tracks": [
        { "name": "yeap1", "popularity": 93 },
        { "name": "yeap2", "popularity": 93 }
      ]
    },
    {
      "id": "4yscD4NQlCKXEpUvBV3nj8",
      "tracks": [
        { "name": "yeap1", "popularity": 46 },
        { "name": "yeap2", "popularity": 46 }
      ]
    },
    {
      "id": "0SfsnGyD8FpIN4U4WCkBZ5",
      "tracks": [
        { "name": "yeap1", "popularity": 82 },
        { "name": "yeap2", "popularity": 82 }
      ]
    },
    {
      "id": "0h1zs4CTlU9D2QtgPxptUD",
      "tracks": [
        { "name": "yeap1", "popularity": 79 },
        { "name": "yeap2", "popularity": 79 }
      ]
    },
    {
      "id": "1i8SpTcr7yvPOmcqrbnVXY",
      "tracks": [
        { "name": "yeap1", "popularity": 97 },
        { "name": "yeap2", "popularity": 97 }
      ]
    },
    {
      "id": "3PfJE6ebCbCHeuqO4BfNeA",
      "tracks": [
        { "name": "yeap1", "popularity": 68 },
        { "name": "yeap2", "popularity": 68 }
      ]
    },
    {
      "id": "3WrFJ7ztbogyGnTHbHJFl2",
      "tracks": [
        { "name": "yeap1", "popularity": 90 },
        { "name": "yeap2", "popularity": 90 }
      ]
    },
    {
      "id": "003f4bk13c6Q3gAUXv7dGJ",
      "tracks": [
        { "name": "yeap1", "popularity": 69 },
        { "name": "yeap2", "popularity": 69 }
      ]
    },
    {
      "id": "4rYCMf7ApPRVG3yjCbxJ8m",
      "tracks": [
        { "name": "yeap1", "popularity": 28 },
        { "name": "yeap2", "popularity": 28 }
      ]
    },
    {
      "id": "02OR1V0L1ODy7dDlBLTOvx",
      "tracks": [
        { "name": "yeap1", "popularity": 45 },
        { "name": "yeap2", "popularity": 45 }
      ]
    },
    {
      "id": "4NqS7DbPFYwZmniGHCPMpm",
      "tracks": [
        { "name": "yeap1", "popularity": 73 },
        { "name": "yeap2", "popularity": 73 }
      ]
    }
  ],
  "total": 50,
  "limit": 20,
  "offset": 0,
  "href": "https://api.spotify.com/v1/me/top/artists",
  "previous": null,
  "next": "https://api.spotify.com/v1/me/top/artists?limit=20&offset=20"
}

A alguien le funciona esta url?? https://platzi-music-api.herokuapp.com/artists/${artistId}/top-tracks?country=CO
Porque me da un error y es que no sé si ya no existe o hay algo mal, ya no sé donde más mirar.