title: Use component as a TemplateRef inside a Service
body: <p>I'm working with Angular 7 and ngrx-bootstrap/modal, and I am trying to create a modal for a generic search. I already have the ng-template that allows me show the controls inside a modal and it is called with a service (And the styles are working, important purpose at the end). The issue here is that I don't want to pass the ng-template everytime I need to show to modal because this ng-template is always the same.</p>
  <p>I have read that the best thing I can do is to create a component instead a template, and it sounds great because I supose this will allow the interaction using @input and @output.</p>
  <p>¿How do I import or create the TemplateRef inside the service and uses the component instance?</p>
  <p>This is the service code so far:</p>
  <pre><code>import { Injectable } from '@angular/core';
  
  import { BsModalRef, BsModalService, ModalOptions } from 'ngx-bootstrap/modal';
  import { SearchControl } from './rm-search-control.component';
  
  
  @Injectable({
      providedIn: 'root'
  })
  
  class SearchService 
  {
      //#region Properties
  
      private _modalConfig : ModalOptions = {
          backdrop: true,
          ignoreBackdropClick: false,
          animated: true
      };
  
      //#endregion
  
  
      //#region Methods
  
      constructor(private modalService : BsModalService) {
  
      }
  
      openSearch(): void {
          let searchTemplateRef = ¿?;
          /* How do I use this template here?: 
             &lt;ng-template #searchTemplate&gt;
                &lt;div class=&quot;search-container&quot;&gt;
                   &lt;em class=&quot;fa fa-search search-icon&quot;&gt;&lt;/em&gt;
                   &lt;input type=&quot;text&quot; class=&quot;search-text&quot;  placeholder=&quot;SEARCH&quot;/&gt; 
                &lt;/div&gt;
             &lt;/ng-template&gt;
          */
  
          this.modalService.show(searchTemplateRef , this._modalConfig);
      }
  
      
      //#endregion
  
      //#region Accessors
  
  
     
      //#endregion
  }
  
  export { SearchService }
  
  </code></pre>