Conditionally add directives

Question

I want to conditionally add a directive to a component (where au-disabled, au-accented, and au-focused are the directives):

<template [ngIf]="disabled">
    <au-placeholder au-disabled></au-placeholder>
</template>

<template [ngIf]="accented">
    <au-placeholder au-accented></au-placeholder>
</template>

<template [ngIf]="focused">
    <au-placeholder au-focused></au-placeholder>
</template>

The above approach works (and is somewhat acceptable to me) because (in my case) the conditional properties disabled, accented, and focused are mutually exclusive - my question arises in cases where the conditional properties are not mutually exclusive (requiring an [ngIf] for every permutation to apply the corresponding inflected form):

<!-- all of the prior <template [ngIf]= ... -->

<!-- plus -->

<template [ngIf]="disabled && accented">
    <au-placeholder au-disabled au-accented></au-placeholder>
</template>

<template [ngIf]="disabled && accented && focused">
    <au-placeholder au-disabled au-accented au-focused></au-placeholder>
</template>

<!-- etc -->

Using the following allows my code to handle the combinations with less HTML:

<au-placeholder [au-disabled]="disabled" [au-accented]="accented" [au-focused]="focused"></au-placeholder>

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?

Answer 1

This is not supported. Only components can be added/removed conditionally.

What you can do is to pass a value to make the directive aware that it should'nt do anything.

See also https://github.com/angular/angular/issues/5332