0

I'm using a mat-expansion-panel which shows all versions of a product (wrapped in a table) If I click (first click) on the td-Element which is the actual latest version of a product, it routes to the right route

If I click on the <button(s)> I need to click twice to get routed.

Tried to replace the buttons with divs/spans whatever. Doesn't work.

Hope I described the problem well enough aaaand thanks for your answers!

<ng-container matColumnDef="title">
  <th  mat-header-cell class="bg-coldgray-100 " *matHeaderCellDef id="title" mat-sort-header><strong>Titel</strong></th>
  <td [routerLink]="[getUrlByItemType(item.type) + getLatestId(item.versions)]" mat-cell *matCellDef="let item let last = last" appLoadOnScroll [last] ="last" (visibleEvent)="loadProducts($event)">
    <mat-expansion-panel (click)="test()" hideToggle [expanded]="expandedRows[item.id]" >
      <mat-expansion-panel-header>
        {{item.title}}
      </mat-expansion-panel-header>
      <button [routerLink]="getUrlByItemType(item.type) + getKeyAndValueFromObjectAtFirstIndex(version).id" class="mt-4 cursor-pointer block" *ngFor="let version of getVersionsArray(item.versions)">
      {{item.title}}
      </button>
    </mat-expansion-panel>
  </td>
</ng-container>
Eangy
  • 1
  • 1

1 Answers1

0

It occures when you create buttons by calling a function in ngFor. I would suggest mapping items in component like:

item.versions = getVesrionsArray(item.versions)

and then use it in html like:

*ngFor="let version of item.versions"
SwissCodeMen
  • 4,222
  • 8
  • 24
  • 34
Marta Tobiasz
  • 1