title: How to add CSS class name from variable in Angular 9 depends on boolean variable?
body: <p>I want to add class names from a variable, but it's depends on another variable in Angular 9.</p>
  
  <p>Here is my TypeScript code</p>
  
  <pre class="lang-js prettyprint-override"><code>export class InputComponent implements OnInit {
    @Input() inputBlockClass = 'col-12 d-flex px-0';
    @Input() inputBlockExtraClass = 'col-md-9';
    @Input() showLabel = true;
  
    // ...
  }
  </code></pre>
  
  <p>Here is my HTML code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div [class]="inputBlockClass" [class.inputBlockExtraClass]="showLabel"&gt;
  </code></pre>
  
  <p>I tried this too, but it's doesn't work:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div [class]="inputBlockClass" [ngClass]="{inputBlockExtraClass: showLabel}"&gt;
  </code></pre>
  
  <p>Both solution give this result:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div _ngcontent-sxj-c111="" class="col-12 d-flex px-0 inputBlockExtraClass"&gt;
  </code></pre>
  
  <p>But I want this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div _ngcontent-sxj-c111="" class="col-12 d-flex px-0 col-md-9"&gt;
  </code></pre>
  
  <p>How can I add a class name from variable depends on boolean variable?</p>