Styling a MatHeaderCell dynamically with NgStyle?

Question

I'm trying to provide dynamic styling to a MatHeaderCell instance like this:

[ngStyle]="styleHeaderCell(c)"

I've created a demo here.

I can see that:

styleHeaderCell(c)

Receives the column and returns and object however the style is not applied, and so the column still has a min width of 12rem and I want it to be 4rem. Thoughts?

Answer 1

It appears to be a syntax issue in your styles helper function.

Give this a try.

public styles: any = {
    ID: {
      'min-width': '4rem',
      'background-color': 'red'
    }
  };

STACKBLITZ

https://stackblitz.com/edit/angular-material-data-table-module-styling-7vhrth?file=src/app/app.component.ts