I am using the angular-material library here and there in an angular5 application, but I don't want its directive/component/class names in my markup, which I prefer to keep agnostic with respect to external libraries. However, I tried doing something like this:
import { Directive,
ElementRef,
Renderer,
Renderer2 } from "@angular/core";
import { MatButton } from "@angular/material";
import { OnInit } from "@angular/core";
import { Platform} from "@angular/cdk/platform";
import {FocusMonitor} from "@angular/cdk/a11y";
@Directive({
selector: '[my-button]'
})
export class MyButtonDirective extends MatButton {
ngOnInit(): void {
}
constructor(renderer: Renderer2, elementRef: ElementRef, _platform: Platform, _focusMonitor: FocusMonitor) {
super(renderer, elementRef, _platform, _focusMonitor);
}
}
But when I apply the my-button
attribute, it seems to have no effect whatsoever. Even console.logs
from inside the directive constructor/onInit are not printed. I'm not real sure what I'm doing wrong as I've never used directives before in Angular.
ubi-button
attribute when your directive hasmy-button
selector? – Alexander Leonov