angular - How to dynamically create buttons on an ionic form

Question

I would like to dynamically create buttons in ionic. I can't find any information on this. I tried a couple of quick tests which failed.

  week = `      <ion-row>
    <ion-col>
      <ion-label (click)="showDate(11)">11</ion-label>
    </ion-col>
    <ion-col>
      <ion-label (click)="showDate(12)">12</ion-label>
    </ion-col>
    <ion-col>
      <ion-label (click)="showDate(13)">13</ion-label>
    </ion-col>
    <ion-col>
      <ion-label (click)="showDate(14)">14</ion-label>
    </ion-col>
    <ion-col>
      <ion-label (click)="showDate(15)">15</ion-label>
    </ion-col>
    <ion-col>
      <ion-label (click)="showDate(16)">16</ion-label>
    </ion-col>
    <ion-col>
      <ion-label (click)="showDate(17)">17</ion-label>
    </ion-col>
  </ion-row>`
  week2 = "      <ion-row><ion-col>  <ion-label (click)='showDate(11)'>11</ion-label></ion-col><ion-col>  <ion-label (click)='showDate(12)'>12</ion-label></ion-col><ion-col>  <ion-label (click)='showDate(13)'>13</ion-label></ion-col><ion-col>  <ion-label (click)='showDate(14)'>14</ion-label></ion-col><ion-col>  <ion-label (click)='showDate(15)'>15</ion-label></ion-col><ion-col>  <ion-label (click)='showDate(16)'>16</ion-label></ion-col><ion-col>  <ion-label (click)='showDate(17)>17</ion-label></ion-col></ion-row>"

Basically I need to create a form or page based on passed in parameters which could drastically change the layout of the form. It would be really inefficient to make a couple of dozen pages. It will also create a maintenance nightmare to have several if statements per button with numerous buttons that may or may not be visible. Any suggestions?

question from:https://stackoverflow.com/questions/65891928/how-to-dynamically-create-buttons-on-an-ionic-form

Answer 1

Since you tagged angular, I guess you're using it, so you can use *ngFor, like the code bellow:

<ion-list padding *ngFor="let item of items; let i = index">
        <ion-item (click)="showDate(i)">{{ i }}</ion-item>
</ion-list>