dynamically instantiate an ng-template and create HTML in angular 5

Question

I am trying to build a typeahead.js component for use in Angular 5. I have a working plunker, as far as I can get it working.

When the component, type-head is declared, an ng-template is supplied to the component.

<type-head>
    <ng-template #hint let-hint="hint">name: {{hint.name}}</ng-template>
</type-head>

Each hint should display name: sam|frodo|pippin etc.

The type-head component is declared as follows:

@Component({
  selector: 'type-head',
  template: `
    <input #input class="form-control" />
    <ng-content #content></ng-content>
  `
})

When the typeahead.js component needs to display a hint, it executes a callback, the suggest method which should return HTML content.

At the moment my implementation is as follows:

/**
 * TODO: REPLACE THIS FUNCTION WITH A DYNAMIC TEMPLATE
 */
suggest(value:any) {
   return $("<div>name: " + value.name + "</div>");
}

I want to replace this implementation with an implementation that uses the ng-template. I can render the template using *ngTemplateOutlet, but I don't know how to do it dynamically so I can return the HTML.

My question is:

How do I load up the #hint ng-template, bind the value to it, and return the rendered HTML to typeahead.js in my suggest function.

Answer 1

You can use TemplateRef::createEmbeddedView method to create embedded view and then obtain DOM node to pass to typeahead as a template:

parent.html

<type-head>
    <ng-template #hint let-hint="hint">
       <div>name: {{hint.name}}</div>
    </ng-template>
</type-head> 

component.ts

@ContentChild(TemplateRef) templateRef: TemplateRef<any>;

suggest(value:any) {
  const embeddedView = this.templateRef.createEmbeddedView({ hint: value });
  embeddedView.detectChanges();
  this.embeddedViews.push(embeddedView);
  return embeddedView.rootNodes[1];
}

Plunker Example