I want to create custom attribute directive in the same manner how it is done for built-in directives like "attr", "class", "style" used as in this example:
<div [style.width.px]="mySize">
The documentation here describes only the case with a fixed directive name. So the questions are:
How should I specify selector for such directive?
How can I retrieve the variable part of the directive name?
Or may be it is not possible at all and used only for built-in directives?
Though it's almost certainely not possible to do this as inspected by @Günter as well.
But if you just want a directive that works almost similarly to the style, this might help you.
Usage:
<h2 [customStyle]="['width.px', mysize]" >Hello {{name}}</h2>
Custom Directive:
@Directive({
selector: '[customStyle]',
inputs: ['style:customStyle']
})
export class CustomDir{
style;
constructor(private elRef: ElementRef){
}
ngAfterViewInit(){
if(this.style){
const prop = this.style[0].split('.')[0];
const unit = this.style[0].split('.')[1];
const val = this.style[1];
this.elRef.nativeElement.style[prop] = val + (unit || '');
}
}
}
ngStyleThis is not supported and also not planned as far as I know.
Or may be it is not possible at all and used only for built-in directives?
This syntax is not related to directives, it is built-in binding syntax.
