CODEWITHSUNDEEP
angularangular-material
orbitory
orbitory

Reputation: 1120

Can I get the index of a header cell for an angular material table?

Can I replace [0] with the actual index of the header cell within the table?

something like [ngClass]="{'highlight':highlightedRows [this.elem.cellIndex] }"

Here is the code

<ng-container matColumnDef="position">
    <th mat-header-cell 
      *matHeaderCellDef
      (click)="highlightColumn($event)"
      [ngClass]="{'highlight':highlightedRows[0]}"
    > No.</th>
    <td mat-cell *matCellDef="let element"
    [ngClass]="{'highlight':highlightedRows[0]}"

    > {{element.position}} </td>
  </ng-container>

Thank you

Upvotes: 1

Views: 901

Answers (2)

user11202780
user11202780

Reputation:

I think that You need redesign You table and use something like this. Create columns using *ngFor

<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay, let i = index">
     <th mat-header-cell *matHeaderCellDef> {{column}} {{i}}</th>
     <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
</ng-container>

More You make find here https://material.angular.io/components/table/examples in expandable table

Upvotes: 1

The James
The James

Reputation: 465

change the to this:

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

Then, you can use i in place of the 0.

Upvotes: 1

Related Questions