Angular 按变量属性值的指令选择器

Question

is it possible to create a custom directive based on a variable attribute value? something like that:

@Directive({
    selector: 'input:[inputmode=numeric], input:[inputmode=decimal]',
})
export class NumericDirective{
// Dom manipulation and huge implementation to let that input accept only numbers and handle spin up and down and format the display value on blur and parse value on focus ..... etc.
}

@Directive({
    selector: 'input:[inputmode=XXX]',
})
export class XXXDirective{
// a total implementation and constructor DI to achieve different job
}

and then in component HTML

<input inputmode="decimal" />
<input inputmode="XXX" />

it works fine, the first input will be handled by NumericDirective and the second will be handled by XXXDirective.

I can achieve my goal like this

<ng-container [ngSwitch] ="currentMode">
<input *ngSwitchCase="numeric" inputmode="numeric" /> // apply different directive based on selector = input[numeric]
<input *ngSwitchCase="decimal" inputmode="decimal" /> // apply different directive based on selector = input[decimal]
<input *ngSwitchCase="XXX" inputmode="XXX" /> // apply different directive based on selector is input[XXX]
....
</ng-container>

my question is there is any way to shorthand this switch to be something like the following line and angular can do the same behavior?

<input [inputmode]="currentMode" />

when I do that: None of the directives will be applied to the input. by setting currentMode value in ts code it seems that Angular did not support build directive by dynamic selector attribute value. I think it creates a directive initially by selector attribute value and since it is not set yet it did not detect the proper directive and just ignore it.

any solution or workaround to achieve this. the main purpose is to set currentMode at runtime and expects to apply the proper directive behaviors.

Answer 1

Ok i have managed to get this working.

First you have to set your directive selector to 'input:[inputMode]'. Then you have to create an @Input() named inputMode which will listen for the injected value.

@Directive({
  selector: 'input:[inputMode]'
})
export class NumericDirective implements AfterViewInit{

  @Input() inputMode?: string;

  constructor(private elRef: ElementRef<HTMLInputElement>) {}

  ngAfterViewInit(): void { alert(this.inputMode); }

}