Как ввести материал компонента из директивы?

Question

Есть ли способ добавить компонент материала из директивы, используя renderer2?

В моем случае я пытаюсь составить директиву, показывающую вращающуюся циновку в кнопке.

Например, вот директива. Этот код делает что-то похожее на то, что я пытаюсь сделать. Поскольку я использую Angular Material в своем проекте, я хотел бы добавить Material Component под названием mat-progress-spinner вместо этого простого gif

@Directive({
  selector: '[appButtonLoader]'
})
export class ButtonLoaderDirective {
  img: HTMLImageElement;

  @Input() set appButtonLoader(value: boolean) {
  this.toggle(value);
}

constructor(private element:ElementRef) {
  this.img = document.createElement('img');
  this.img.src = 'https://www.winston.com/cached/40181/images/spinner-white.gif';
  this.toggle(this.appButtonLoader);
}

toggle(condition: boolean) {
  condition ? this.show() : this.hide()
}

show() {
  this.element.nativeElement.appendChild(this.img);
}

hide() {
  this.img.remove();
}

}

stackblitz: https://stackblitz.com/edit/load-button-directive?file=app%2Fbutton-loader.directive.ts

Answer 1

Решение найдено здесь: https://angular.io/guide/dynamic-component-loader

В моем случае этого было недостаточно, потому что Mat-Button не является ViewContainerRef, поэтому я не могу создать компонент.

Окончательным решением было создать компонент, а затем переместить его с помощью Renderer2.appendChild

Stackblitz обновлено: https://stackblitz.com/edit/load-button-directive?file=app%2Fbutton-loader2.directive.ts