在服务中使用组件作为 TemplateRef

Question

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.

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.

¿How do I import or create the TemplateRef inside the service and uses the component instance?

This is the service code so far:

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?: 
           <ng-template #searchTemplate>
              <div class="search-container">
                 <em class="fa fa-search search-icon"></em>
                 <input type="text" class="search-text"  placeholder="SEARCH"/> 
              </div>
           </ng-template>
        */

        this.modalService.show(searchTemplateRef , this._modalConfig);
    }

    
    //#endregion

    //#region Accessors


   
    //#endregion
}

export { SearchService }

Answer 1

You can create a component which will have all the logic of the search and the template, and from the Bootstrap Modal Controller, you can pass that component reference instead of the template reference.

this.modalService.show(ModalContentComponent)

Don't forget to include the new component as an entryComponent inside you module as it will be used for passing it to the modal controller.

Here is the official example that you can check it here :

import { Component, OnInit } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
 
@Injectable({
  providedIn: 'root',
})
export class DemoModalService {
  bsModalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}
 
  openModalWithComponent() {
    const initialState = {
      list: [
        'Open a modal with component',
        'Pass your data',
        'Do something else',
        '...'
      ],
      title: 'Modal with component'
    };
    this.bsModalRef = this.modalService.show(ModalContentComponent, {initialState});
    this.bsModalRef.content.closeBtnName = 'Close';
  }
}
 
/* This is a component which we pass in modal*/
 
@Component({
  selector: 'modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title pull-left">{{title}}</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <ul *ngIf="list.length">
        <li *ngFor="let item of list">{{item}}</li>
      </ul>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" (click)="bsModalRef.hide()">{{closeBtnName}}</button>
    </div>
  `
})
 
export class ModalContentComponent implements OnInit {
  title: string;
  closeBtnName: string;
  list: any[] = [];
 
  constructor(public bsModalRef: BsModalRef) {}
 
  ngOnInit() {
    this.list.push('PROFIT!!!');
  }
}