title: Angular Mat Datepicker - Apply styles dynamically
body: <p>I have a Datepicker component which contains a Material Datepicker. This component receives a <code>datepickerConfig</code> 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.</p>
  <p>I'm quite new to Material styling so I'm wondering how I can apply these styles dynamically, during runtime?</p>
  <p>As an example, for the shadow, I have declared the following variables in my SCSS file:</p>
  <pre><code>/* 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: ...;
      ...
  }
  </code></pre>
  <p>During runtime, I need to check what kind of shadow level is in the <code>datepickerConfig</code> object and dynamically apply the correct style to the element.</p>
  <p>My Datepicker template:</p>
  <pre><code>&lt;mat-form-field appearance=&quot;fill&quot;&gt;
      &lt;mat-label&gt;Choose a date&lt;/mat-label&gt;
      &lt;input matInput [matDatepicker]=&quot;picker&quot;&gt;    
      &lt;mat-datepicker-toggle matSuffix [for]=&quot;picker&quot;&gt;&lt;/mat-datepicker-toggle&gt;
      &lt;mat-datepicker #picker (opened)=&quot;opened()&quot;&gt;
        &lt;mat-datepicker-actions&gt;
          &lt;button mat-button matDatepickerCancel&gt;CANCEL&lt;/button&gt;
          &lt;button mat-raised-button matDatepickerApply&gt;OK&lt;/button&gt;
        &lt;/mat-datepicker-actions&gt;
      &lt;/mat-datepicker&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  <p>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?</p>
  <p>Thanks.</p>