Setting the Angular Material Data Table Header Left CSS Property with ngStyle for Sticky Columns?

Question

In this demo I'm trying to set the left CSS property of the CUSTOMER mat-header-cell dynamically to 64px using ngStyle but it looks like Angular overwrites the value with what it thinks it should be ... 216px after the ngStyle update is applied.

https://stackblitz.com/edit/angular-material-data-table-module-styling-sticky-column-adjust

Thoughts on how to fix this?

Answer 1

As you said, it is not taking 64px because of some default override. In this case, we need to use left:64px !important. But using '!important' is not supported when using ngStyle. So, therefore we define a new class in the css file

    .leftMargin {
      left: 64px !important;
    }

and in the ngFor loop, we apply this css class only when the column name is 'customer'.

     <ng-container *ngFor="let c of COLUMNS" matColumnDef="{{c.toUpperCase()}}" [sticky]="isSticky(c)">
            <mat-header-cell [ngClass]="{'leftMargin': c=='CUSTOMER'}" [ngStyle]="styleHeaderCell(c)" *matHeaderCellDef mat-sort-header>
              {{c.toUpperCase().split('_').join('')}}
            </mat-header-cell>
            <mat-cell *matCellDef="let row;">{{row[c.toLowerCase()] ? row[c.toLowerCase()] : row[c.toUpperCase()]}}
            </mat-cell>
     </ng-container>

Refer to this stackblitz list: https://stackblitz.com/edit/angular-material-data-table-module-styling-sticky-column-cywshb?file=src%2Fapp%2Fapp.component.html