way to increment a separate counter inside of a angular ngfor loop based on condition

Question

I have a *ngFor loop that I need increment a customCounterHERE variable based on the element from the loop and a specific condition. Thus this customCounter variable will be different than the index of that loop.

I have read about custom attribute directives but I am not sure if this is what I need and how to use it. Any ideas and solutions would be very helpful!

<tr *ngFor="let diff of cardList[i].Relations;">
  <td>{{diff.relationName | titlecase}}</td>
  <td>{{diff.relationType | titlecase}}</td>
  <td>{{diff.operation | titlecase}}</td>
  <td *ngIf="diff.relationName !== 'Contains'  && diff.relationName !== 'Houses' ">. 
    {{diff.name | titlecase}} 
  </td>
  <td *ngIf="diff.relationName === 'Contains' || diff.relationName === 'Houses'; " 
    style="color:black 
    (click)="showMoeFunc(i);toggleNestedDiff(i,customCounterHERE);"
  >
  <div style="display:flex" >
    <span>{{diff.name | titlecase}}</span>
    <button *ngIf="!showNested[i][customCounter]">
      <mat-icon class="hide-diff"[ngClass]="!showNested[i][customCounterHERE]?'hide- 
      diff':'rotateArrow hide-diff'"
      >
        arrow_right</mat-icon>
    </button>
    <button *ngIf="showNested[i][customCounterHERE]">
      <mat-icon class="hide-diff"[ngClass]="showNested[I] 
        [customCounterHERE]?'rotateArrow hide-diff':'hide-diff'"
      >
       arrow_right
      </mat-icon>
    </button>
  </div>
 </td>
 <td>{{diff.currentValue === '' ? '---' : diff.currentValue}}</td>
 <td>{{diff.newValue === '' ? '---' : diff.newValue}}</td>
</tr>

If the diff.relationName === 'Contains' I want to increment the customCounterHere and pass it functions and specific places where it's necessary.

Answer 1

I think you are overcomplicating your logic. if you are stepping through an array using:

*ngFor="let diff of cardList[i].Relations;"

then you should be able to handle any counters by attaching them to the diff item:

(click)="diff.customCounter++"

and then use that in your logic:

[ngClass]="showNested[i][diff.customCounter]?...