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 stackoverflow.com/questions/49648270/… — lissettdm
– lissettdm, Commented Nov 15, 2020 at 13:12
Not sure but it seems to be working fine here : stackblitz.com/edit/angular-xd55mx?file=app/… — Himanshu Singh
– Himanshu Singh, Commented Nov 15, 2020 at 13:19

Mar · Accepted Answer · 2020-11-15 14:06:21Z

0

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"

answered Nov 15, 2020 at 14:06

Mar

856 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

using index of item in angular material

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related