The source code below shows a section of an IONIC page. This page is about shapes and the information of the shapes. For each shape 2 buttons are shown on the page: shape-properties-button and material-information-button. My question is if I have the possibility to give the buttons different IDs?

For example: I have a page with 2 shapes. Shape1 with two buttons shape-properties-button and material-information-button. and Shape2 with the same 2 buttons. I want the buttons material-information-button of Shape1 and Shape2 to behave differently.

<ion-row  *ngFor="let shape of shapeGroup.shapes; index as j">
        <ion-row >
          <ion-col size="2">
            {{shape.externalid}}
          </ion-col>
          <ion-col size="6">
            {{shape.shapeName}}
          </ion-col>
          <ion-col size="4">
            {{shape.shapeType}}
          </ion-col>
        </ion-row>
        <ion-row >
          <ion-col size="6" size-xs="6" size-sm="6" size-md="6" size-lg="6" size-xl="6">
            <ion-buttons>
              <ion-button id="shape-properties-button" 
                (click)="selectShapeProperty(j)">
                Details
              </ion-button>
            </ion-buttons>
          </ion-col>
          <ion-col size="6" size-xs="6" size-sm="6" size-md="6" size-lg="6" size-xl="6">
            <ion-buttons>  
              <ion-button id="material-information-button"  
                (click)="selectBridgeInformation(j)">
                Brückeninformationen
              </ion-button>
            </ion-buttons>
          </ion-col>         
        </ion-row>
        <ion-row *ngIf="shouldShapePropertyBeShown(j)" size="12"  id="shape-properties" >
          <ion-col size="4" *ngFor="let property of shape.shapeProperties" style="margin-top: 8px; background-color:#f9efef; ">
           <div >{{property.propertyName}}</div> 
           <div > {{property.propertyValue}}</div>
          </ion-col>
        </ion-row>
        <ion-row *ngIf="shouldBridgeBeShown(j)" size="12"  id="shape-properties" >
          <ion-col size="12" size-xs="12" size-sm="12" size-md="12" size-lg="12" size-xl="12">
              <ion-row>

CodePudding user response：

Jus pass shape in both of those buttons as second param

<ion-button id="shape-properties-button" 
       (click)="selectShapeProperty(j,shape)">
           Details
</ion-button>

and in the methods check the shape type and do actions accordingly.

selectShapeProperty(index,shapeObj){
 switch (shapeObj.shapeType){
   cases 'Circle':
     do something;
   case ....
      ....
   default:
     console.error('unknown shape')
 }

}

Note: In your provided code, I don't see a point in creating id in ngFor unless they are unique.

Update:

try

 <ion-button [id]="'shape-properties-button-' (j 1)" 
                (click)="selectShapeProperty(j)">
                Details
              </ion-button>