Sticky columns for dynamic colum definition - angular-material

Question

I am trying to define an Angular Material table with approx 24 columns and they are not uniform in behavior. Some columns just display text, others may have controls. I want to try and keep it as dynamic as possible and not have them all defined in the HTML file.
I have created an object to define a column object and create the columns dynamically:
<ng-container *ngFor="let column of columnDefinitions" [matColumnDef]="column.columnName">
<th mat-header-cell
*matHeaderCellDef
mat-sort-header
[disabled]="!column.sortable"> {{ column.label }} </th>
<td mat-cell *matCellDef="let row"
[ngClass]="getClasses(row, column)"> {{ getColumnContentFor(row, column.columnPath) }} </td>
</ng-container>
Some of the questions I have are around how to best add functionality based on the type of column I need:
I want to add a sticky column just to the first couple of columns
Ideally even the [ngClass] would like it only for certain columns so it doesn't have to evaluate this function for every column.
If some columns have a custom control how can I add a custom template
Any examples you may suggest would be extremely helpful.

Answer 1

You can do this by adding the index to ngFor, like this: *ngFor="let column of columnDefinitions; let i = index". Then, you can conditionally add the sticky position by adding this to the th cell: [style.position]="i < 2 ? 'sticky' : null" (null value means that the style won't be added).
EDIT: You also need to change the matHeaderRowDef to *matHeaderRowDef="columnsToDisplay; sticky: true"
While you can use something like ngSwitch for that, I don't think it's worth the effort. You can, however, make sure you return null as early as possible for classes that don't need it.
Inside the td element, you can use ngSwitch, as described here. You can use the column index, for example.