title: Conditionally add directives
body: <p>I want to conditionally add a directive to a component (where <code>au-disabled</code>, <code>au-accented</code>, and <code>au-focused</code> are the directives):</p>
  
  <pre><code>&lt;template [ngIf]="disabled"&gt;
      &lt;au-placeholder au-disabled&gt;&lt;/au-placeholder&gt;
  &lt;/template&gt;
  
  &lt;template [ngIf]="accented"&gt;
      &lt;au-placeholder au-accented&gt;&lt;/au-placeholder&gt;
  &lt;/template&gt;
  
  &lt;template [ngIf]="focused"&gt;
      &lt;au-placeholder au-focused&gt;&lt;/au-placeholder&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>The above approach works (and is somewhat acceptable to me) because (in my case) the conditional properties <code>disabled</code>, <code>accented</code>, and <code>focused</code> are mutually exclusive - my question arises in cases where the conditional properties are not mutually exclusive (requiring an <code>[ngIf]</code> for every permutation to apply the corresponding inflected form):</p>
  
  <pre><code>&lt;!-- all of the prior &lt;template [ngIf]= ... --&gt;
  
  &lt;!-- plus --&gt;
  
  &lt;template [ngIf]="disabled &amp;&amp; accented"&gt;
      &lt;au-placeholder au-disabled au-accented&gt;&lt;/au-placeholder&gt;
  &lt;/template&gt;
  
  &lt;template [ngIf]="disabled &amp;&amp; accented &amp;&amp; focused"&gt;
      &lt;au-placeholder au-disabled au-accented au-focused&gt;&lt;/au-placeholder&gt;
  &lt;/template&gt;
  
  &lt;!-- etc --&gt;
  </code></pre>
  
  <p>Using the following allows my code to handle the combinations with less HTML:</p>
  
  <pre><code>&lt;au-placeholder [au-disabled]="disabled" [au-accented]="accented" [au-focused]="focused"&gt;&lt;/au-placeholder&gt;
  </code></pre>
  
  <p>but the rendered HTML always has all of the directives each carrying a truth value... the component must test the truth value of each directive to respond appropriately, but it would be cleaner to not even have irrelevant directives applied. Is there a better way to do this?</p>