Is there a way to easily wrap or extend Angular-material directives in Angular 5?

Question

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.

Why are you applying ubi-button attribute when your directive has my-button selector? — Alexander Leonov
oh sorry, i meant to type my-button, i changed the prefix for this post but then typed the wrong one here — Shawn Mercado

Michael Bushe Michael Bushe · Accepted Answer · 2018-08-08T22:05:17

I don't know how much further you'd get, but you said you are using an attribute, when maybe you want to use an element Test

Is there a way to easily wrap or extend Angular-material directives in Angular 5?

2 Answers