title: Dynamic CSS Classes in Angular2+
body: <p>HTML:</p>
  
  <pre><code>&lt;div *ngFor="let record of lift" class="list-lifts" [class.showLifts]="isBtnActive"&gt;
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>isBtnActive: boolean = false;
  
  toggleClass() {
      this.isBtnActive = !this.isBtnActive;
    }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.list-lifts {
  
    &amp;:not(:first-of-type) {
      margin-top: -11px !important;
      display: none;
    }
  }
  
  .showLifts {
    display: block !important;
  }
  
  // I need something like this to be built in the view:
  .ValueshowLifts {}
  </code></pre>
  
  <p>The <code>toggleClass()</code> function toggles the CSS class <code>.showLifts</code> on the click of a button.  This works great.</p>
  
  <p>The issue is, I need the class <code>.showLifts</code> to have a dynamic name and I'm not sure what the syntax is to produce it.  For logical reasons, here's an example:</p>
  
  <pre><code>[class.{{ record.name }}showLifts]="isBtnActive"
  </code></pre>
  
  <p>But of course this isn't valid syntax.</p>