directive selector not matching dynamic (bound) classname or attribute

Question

I'm building a dynamic form following the cookbook documentation

In addition, I have a directive with the selector input[type=signature].

If I use this in dynamic-form-question.component.ts:

<input *ngSwitchCase="'signature'"
            [id]="question.attribs.name" 
            [formControlName]="question.attribs.name" 
            type="signature" 
            class="signature" />

my directive matches.

However, if I use

<input *ngSwitchDefault
            class="form-control"
            [formControlName]="question.attribs.name"
            [id]="question.attribs.name"
            [ngClass]="question.attribs.class"
            [placeholder]="question.attribs.placeholder"
            [type]="question.attribs.type" />

where the type.attribute is bound, it's no dice.

likewise I tried the selector input.signature and input.signature, input[type=signature], but they also don't work if the class or type attributes are bound.

Is this not supported, do I need to do something else to get this functionality?

@jonrsharpe thanks for the edits! – Brad Kent Nov 15 '16 at 18:32 — Brad Kent, Nov 15 '16 at 18:32

score 1 · Accepted Answer · edited May 23 '17 at 12:09

Directive selectors have to be static element names, attributes, or classes. They need to be added statically do the components template. Everything added dynamically in any way is not considered by Angular2.

The only workaround I know is to create the components at runtime (with static element names, attributes or classes) for directives and pipes to be created with them - like explained in Equivalent of $compile in Angular 2

directive selector not matching dynamic (bound) classname or attribute

1 Answers1