Conditionally add directives
<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>