using index of item in angular material

Question

i want to find index of elemnt in table in angular material . i write this code :

<table mat-table matSort [dataSource]="dataSource" multiTemplateDataRows>


    <ng-container matColumnDef="title">

        <th mat-header-cell *matHeaderCellDef> {{ 'GENERAL.TITLE' | translate }} </th>
        <td mat-cell *matCellDef="let element ; let i = index">
            <span class="icon" *ngIf="element.isHeading==true">
                <mat-icon *ngIf="element.parentId==null" (click)="openChild(element.id,i)">keyboard_arrow_down</mat-icon>
            </span> {{element.title}} </td>
    </ng-container>


    <!-- <ng-container matColumnDef="courseTitle">
        <th mat-header-cell *matHeaderCellDef> {{ 'LESSON.COURSE_TITLE' | translate }} </th>
        <td mat-cell *matCellDef="let element" ktIsEllipsisActive> {{element.courseTitle }} </td>



    <ng-container matColumnDef="courseTitle">
        <th mat-header-cell *matHeaderCellDef> {{ 'LESSON.CLASS' | translate }} </th>
        <td mat-cell *matCellDef="let element" ktIsEllipsisActive> {{element.courseTitle }} </td>
    </ng-container>


    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row;let i=index; columns: displayedColumns;"
        [ngClass]="'child'+row.parentId"
        [class.isChild]="row.parentId!==null && row.isHeading===false "></tr>

</table>

and i write this for find index :

*matCellDef="let element ; let i = index"

but every time it show me i is undefined .

how can i access to index of item in <td>?

You will find an answer here https://stackoverflow.com/questions/49648270/how-to-define-index-in-angular-material-table/53525491 — lissettdm, Nov 15 '20 at 13:12
Not sure but it seems to be working fine here : https://stackblitz.com/edit/angular-xd55mx?file=app/table-basic-example.html — Himanshu Singh, Nov 15 '20 at 13:19
@kianoushdortaj can you replicate the issue on stackblitz and share the link because without having the issue in hand it is difficult to answer this — Himanshu Singh, Nov 15 '20 at 13:24

score 0 · Answer 1 · answered Nov 15 '20 at 14:06

Your iterator is incomplete. You are declaring an element variable in an unfinished for...of loop.

*matCellDef="let element ; let i = index"

Should have the keyword "of" after the "element" variable. After "of", there should be a reference to a collection (such as an array, for example). Otherwise, the element variable will have nowhere to pull information from.

If you're rendering table cells by binding them to an array in your typescript file, be sure to add that array's name to the end of that for...of loop.

*matCellDef="let element of yourArrayHere; let i = index"

using index of item in angular material

1 Answers1