title: mat-button-toggle-checked with dynamic style + Angular 6
body: <p>I'm trying to customize my button-toggle when it is checked but my current code is not working...</p>
  
  <p>Here is the actual code </p>
  
  <pre><code>&lt;mat-button-toggle-group #mytoggle (change)="selectoption($event)" value="{{num}}"&gt;
              &lt;mat-button-toggle [style.background-color]="getColor(op)" *ngFor="let op of mylist" [value]="op"&gt;{{op}}&lt;/mat-button-toggle&gt;
          &lt;/mat-button-toggle-group&gt;
  </code></pre>
  
  <p>Here is my method on .ts</p>
  
  <pre><code> getColorChecked(opcao: any){
          if ( opcao === 2){
              return '#EA0B28 !important;';
          }else{
              return '#9d9b9a !important;';
          }
      }
  </code></pre>
  
  <p>Here is my scss file</p>
  
  <pre><code>.mat-button-toggle-group, .mat-button-toggle-standalone{
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.02), 0 2px 2px 0 rgba(0,0,0,.01), 0 1px 5px 0 rgba(0,0,0,.12);
  }   
   .mat-button-toggle{
        border-right: 1px solid #cccccc40 !important;
        font-weight: 400;
        width: 50px !important;
        padding: 0px !important;
        background: #f7f9fbc7 !important;
        div{
          padding: 0px !important;
        }
      }
      .mat-button-toggle-checked {
        color: #fbfbfb;
      }
  </code></pre>
  
  <p>It's not working... There's a best way to do that?</p>