Angular Mat Datepicker - Apply styles dynamically

user_15822615 0
Viewed 1898

I have a Datepicker component which contains a Material Datepicker. This component receives a datepickerConfig object describing how the Datepicker should be styled. For example, this object describes what level of shadow to apply, the focus styles, hover styles, etc.

I'm quite new to Material styling so I'm wondering how I can apply these styles dynamically, during runtime?

As an example, for the shadow, I have declared the following variables in my SCSS file:

/* shadow */
$shadow-opacity: rgba(0, 0, 0, 0.3);
$dp-box-shadow-mobile: 0 30px 40px $shadow-opacity;
$dp-box-shadow-desktop-1: 0 3px 6px $shadow-opacity;
$dp-box-shadow-desktop-2: 0 6px 12px $shadow-opacity;
...
// more variables for the different styles

.mat-datepicker-content {
    // dynamically apply variables to these styles
    // e.g. if datepickerConfig.shadow.level === 2 
    // then $dp-box-shadow-desktop-2 should be applied 
    box-shadow: ...; 
    border: ...;
    border-radius: ...;
    ...
}

During runtime, I need to check what kind of shadow level is in the datepickerConfig object and dynamically apply the correct style to the element.

My Datepicker template:

<mat-form-field appearance="fill">
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker">    
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker (opened)="opened()">
      <mat-datepicker-actions>
        <button mat-button matDatepickerCancel>CANCEL</button>
        <button mat-raised-button matDatepickerApply>OK</button>
      </mat-datepicker-actions>
    </mat-datepicker>
</mat-form-field>

How can I achieve this, not only for the shadow but for the multiple styles I have to dynamically set? I'm wondering about a clean way to do this with Angular... or can this only be achieved targeting the class with JS?

Thanks.

angular-material angular datepicker css
2 Answers

You can achieve what you want by using CSS variables. You cannot use SCSS variables, they are not available for you in run time, because they disappear when SCSS is compiled into CSS.

Support for CSS variables is now pretty good. Although IE11 is out of the game.

I've created an example in stackblitz that is dynamically changing style of a button shadow using CSS variable based on the value provided via config: https://stackblitz.com/edit/angular-ivy-cuyhed?file=src/app/fancy-button.component.ts

Global styles contains definition of CSS variables.

styles.css

    :root {
     /* shadow-opacity variables, that will be used based on the configuration */
      --shadow-opacity-level-1: rgba(0, 0, 0, 1);
      --shadow-opacity-level-2: rgba(0, 0, 0, 0.5);

      /* default shadow opacity */
      --shadow-opacity: var(--shadow-opacity-level-1);
    }

    /* global styles for a fancy-button, similar to your .mat-datepicker-content class */
    .fancy-button {
      border: 3px solid;
      padding: 0.25em 0.5em;
      /* here we use var(--shadow-opacity) to set default value, --shadow-opacity will be overridden later, based on the current configuration  */
      box-shadow: 5px 5px 0px 0px var(--shadow-opacity);
    }

Next we need a button component, that is using .fancy-button class, but also overrides value of --shadow-opacity variable based on the current configuration value.

The getButtonStyle() method checks the config.shadowLevel value and will set --shadow-opacity variable to appropriate shadow level.

fancy-button.component.ts

    @Component({
      selector: 'fancy-button',
      template: `
        <button 
          class="fancy-button"
          style="{{getButtonStyle()}}"
        >
          {{config.label}}
        </button>
      `,
      styles: [``]
    })
    export class FancyButtonComponent  {
      @Input() config: FancyButtonConfig;

      getButtonStyle(): string {
        if (this.config.shadowLevel === 1) {
          return '--shadow-opacity: var(--shadow-opacity-level-1)';
        }

        if (this.config.shadowLevel === 2) {
          return '--shadow-opacity: var(--shadow-opacity-level-2)';
        }

        throw Error(`Unknown shadowLevel: ${this.config.shadowLevel}`);
      }
    }

Wrapping up

There is also option to use custom classes and overrides, as Nathan suggested in his answer. I think CSS variables and classes overrides are quite equivalent approaches and when deciding between those two I would go with an approach that will produce cleaner and a better maintainable code.

Resources

Answer extended with Angular Material component

Question was asking specifically about Angular material component, but answer above describes regular HTML button.

I've extended stackblitz demo with FancyButtonMatWrapperComponent that wraps mat-raised-button and changing its box-shadow based on provided configuration.

All the mechanics work as described above for regular HTML button. The main difference is, that outer div in index.html has class material-overrides which is helping with overriding the default Angular Material styles.

Global styles.css then contains following overrides

    .material-overrides .mat-raised-button {
      border: 3px solid black;
      padding: 0.25em 0.5em;
      box-shadow: 5px 5px 0px 0px var(--shadow-opacity);
    }
user_12125470

You could use the [ngStyle] directive -- take this example which dynamically sets a width property based on a condition.

  <div [style.width.%]="condition ? 20 : 50" ...>

Using [ngStyle] or the "cleaner" alternative syntax above can get messy once you start managing multiple styles and can't really be used to get at projected content not available in the template.

I might suggest using a class approach instead (with [ngClass] attribute directive) and using a SCSS override to conditionally reset some properties.

<mat-form-field class="datepicker"
                [class.datepicker--modified]="condition">
...

// in the SCSS
.datepicker {
  color: red;

  &--modified {
    color: blue;
  }
}
user_41840750
Related