cssangulartypescriptangular-materialng-style

Styling a MatHeaderCell dynamically with NgStyle?

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?

Solution

  • 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