0

I have a list of items to display in a template.

 <div scrollY="true" height="100px">
<ion-list>
  <ion-item *ngFor=`let item of ${currentPage}` >
    <ion-label class="ion-text-wrap">

      {{item.name}}
      <br>
      <ion-text>
      </ion-text>
    </ion-label>
    <ion-button fill="solid" id="single-restaurant" (click)="goToNextPage()">
      <ion-icon name="arrow-forward-circle-outline">
      </ion-icon>

    </ion-button>

  </ion-item>
</ion-list>

My question is simple, yet i did not find an answer after looking for several hours. In the ngFor directive, is it possible to use an Input() to set the array to iterate, depending on the page? For example, in HomePage i would have an array named home so i would set currentPage="home" and expect to iterate over it.

Is it possible or do i must create a list per page?

Thanks in advance.

dude
  • 1
  • This is not an ionic question. It is entirely angular. This question asks and answers the same concept. https://stackoverflow.com/questions/49826096/creating-a-reusable-button-component-in-angular –  Nov 09 '21 at 18:30
  • You can use a `@Input` to pass the array – Eliseo Nov 09 '21 at 18:56
  • Thank you, @Eliseo. Im just wondering how to pass the array inside ngFor. Backticks and ${{}} are not working. – dude Nov 09 '21 at 19:22
  • Use neither. Everything inside the ngFor is component scope so simply “let item of currentPage” should do (if currentPage is an array defined in your component).. – MikeOne Nov 09 '21 at 19:29
  • @MikeOne I cannot thank you enough, its finally working. Have a good night. – dude Nov 09 '21 at 19:52

0 Answers0