Why isn't my dynamically-created button being styled with Angular Material?

Question

I am trying to create directive which show a button when mouseover.

In angularJS I created an element by:

    angular.element("<button mat-button></button>");

In angular5 Im trying to create element by:

button: any;

constructor(private el: ElementRef,
            private renderer: Renderer2) {
    this.createButton();
}

private createButton(){
    this.button = this.renderer.createElement("button");
    this.renderer.setAttribute(this.button,"mat-fab", "");
    this.renderer.addClass(this.button, "mat-fab");
    this.renderer.appendChild(this.el.nativeElement, this.button);
}

But unfortunatelly the button looks like regular button, not the material design button. It looks like renderer does not render the button but just insert some html without rendering.

Please help me.

Throwing attributes on an element doesn't make them Material elements. They'd need to be processed by the AM directives. Isn't an `*ngIf` state toggle a better approach here anyway? Just toggle that using `(mouseover)`. Show the actual situation's code if you'd like help with that. — isherwood, Feb 21 '18 at 19:38

score 2 · Answer 1 · answered Feb 21 '18 at 21:02

Angular doesn't process any HTML added dynamically. It just adds it verbatim and ignores binding syntax or component or directive selectors.

Angular processes markup only at compilation time but not at runtime.

For a workaround see for example How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

Why isn't my dynamically-created button being styled with Angular Material?

1 Answers1