Ionic 5 passing http data to modal

Issue

I'm making this post today because I have a problem with my ionic application.
So here it is, I get the latest news via an API (NewsAPI). The http request returns an arrey with 20 articles that I display in cards with *ngFor='let article of articles'.
When we click on these cards, a modal opens. I would like to pass the data of the article in the opened modal.
Do you know how this is possible? Since the http request does not return the data of a single article but of 20.
For example, I can't figure out how I can get the data from the 4th article and pass it into the modal of this one.
Thanks for your help in advance. Sincerely Jules.

the main page.html with the 20 articles :

<ion-card *ngFor='let article of articles; let i = index' (click)="openArticle(i)">
    <img [src]='article.urlToImage'/>
    <ion-card-header>
      <ion-card-subtitle>{{ article.author }}</ion-card-subtitle>
      <ion-card-title>{{ article.title }}</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      {{ article.description }}  
    </ion-card-content>
 </ion-card> 

The main page.ts :

export class HomePage {
  searchText = '';
  newsApiUrl = '';
  articles: any = [];

  page = 1;

  constructor(private route: Router, public http: HttpClient, public alertController: AlertController, public toastController: ToastController, public modalController: ModalController) {
    this.topNews();
  }

  readAPI(URL: string) {
    return this.http.get(URL)
  }

  topNews() {
    this.newsApiUrl = 'https://newsapi.org/v2/top-headlines?country=fr&page=' + this.page.toString() + '&apiKey=MYAPI'
    this.readAPI(this.newsApiUrl)
    .subscribe((data) => {
      this.articles = data['articles'];
      console.log(this.articles);
      if(this.articles.length == 0){
        this.page--;
        this.topNews();
        this.noMorePageToast();
      }
    });
  }

  async getArticleDetails(id) {
    let article = null;
    this.newsApiUrl = 'https://newsapi.org/v2/top-headlines?country=fr&page=' + this.page.toString() + '&apiKey=MYAPI'
    this.readAPI(this.newsApiUrl)
    .subscribe((data) => {
      article =  data['articles'][id]
    });
    return article;
  }

  async openArticle(id) {
    console.log('article n°'+id);
    const articleDetails = this.getArticleDetails(id);
    console.log(articleDetails); // Console : [object Promise]

    const modal = await this.modalController.create({
      component: ArticlePagePage,
      componentProps: {   
        article: articleDetails    
      },
      mode: 'ios',
      swipeToClose: true
      // cssClass: 'article-page'
    });
    return await modal.present();
  }
}

The modal page.ts :

export class ArticlePagePage implements OnInit {

  @Input() article;

  constructor(public modalCtrl: ModalController) {
  }

  ngOnInit() {
  }

  dismiss() {
    this.modalCtrl.dismiss({
      'dismissed': true
    });
  }

}

Solution

An option could be to call the openArticle function when touching the article and then inside the function call to another function that returns the article details something like this:

    async openArticle() {

        // Call to another function that returns article details
        const articleDetails = getArticledetails(id);

        const modal = await this.modalController.create({
          component: ArticlePagePage,
          componentProps: {
            article: articleDetails 
          },
          mode: 'ios',
          swipeToClose: true
          // cssClass: 'article-page'
        });
        return await modal.present();
      }


     async getArticleDetails(id){
       // Call to the API and returns the article details
      }

And then on the modal get the article details:

@Component({
  selector: 'app-article-page',
  templateUrl: './article-page.page.html',
  styleUrls: ['./article-page.page.scss'],
})
export class ArticlePagePage implements OnInit {

  @Input() article // This is the article you passed before open the modal

  constructor(public modalCtrl: ModalController) {
  }

  ngOnInit() {
  }

  dismiss() {
    this.modalCtrl.dismiss({
      'dismissed': true
    });
  }

}

Please let me know if this solves your issue.

Answered By - jcobo1