title: How to inject material component from a directive?
body: <p>Is there a way to inject a material component from a directive, using renderer2?</p>
  
  <p>In my case, I try to make a directive that show a mat-progress-spinner in a mat-button.</p>
  
  <p>For example, here is a directive. This code is doing something similar to what I am trying to do. Since I am using Angular Material in my project, I would like to add a Material Component called mat-progress-spinner instead of this simple gif</p>
  
  <pre><code>@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();
  }
  </code></pre>
  
  <p>}</p>
  
  <p>stackblitz: <a href="https://stackblitz.com/edit/load-button-directive?file=app%2Fbutton-loader.directive.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/load-button-directive?file=app%2Fbutton-loader.directive.ts</a></p>