-3

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?

Ole
  • 41,793
  • 59
  • 191
  • 359
  • `mat-header-cell { width: 14rem; }` You can only use this css class inside global `style.css` file and remove ngStyle part. Calling method from ngStyle is not good practive cause, angular will call this method each and every change detection. – Developer Jun 30 '21 at 14:36
  • I have a generic table component that is prebuilt with the pager, sorting, etc. and I need to be able to provide the styles as an input object. Do you have a better way of rendering the settings via the `@Input`? – Ole Jun 30 '21 at 15:41

1 Answers1

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

Marshal
  • 10,499
  • 2
  • 34
  • 53