ngTemplateOutlet: The secret to customisation

[StephenCooper]

ngTemplateOutlet is a powerful tool for creating customisable components. It is used by many Angular libraries to enable users to provide custom templates. But how can we do this for our own components?

In this article we demonstrate how to use ngTemplateOutlet, along with ngTemplateOutletContext, to make a component completely customisable.

[TomerAgmon]

Nice project but I have a small issue with it. You use an element id to identify the options template (#optionName) rather than using a directive. By using a directive you eliminate the possibility of miss-spelling the template identifier (which would break the app if the developer does that).
Also a question - you're showing two ways to do content projection. What's the difference between them? why should we use one and not the other? They seem to do pretty much the same

[StephenCooper]

Also a question - you're showing two ways to do content projection. What's the difference between them? why should we use one and not the other? They seem to do pretty much the same

Do you mean how I am using @ContentChild and an @input selector? If so they are doing the same thing, just passing the temlplateRef into the component via a different Angular selector. There are situations where one can be more beneficial.

If you take a look at the Input example, note how the template is defined outside of the component app-my-selector. This means that you can re-use this template in multiple selectors. You cannot do this with the ContentChild approach.

However, with the ContentChild approach, it is probably conceptually easier to reason about defining your template within the component it is going to be used in.

Do you have an example of how the directive would prevent issues with typos?

[apenachi]

Great article !! but I'm just curious when you said "You can also use @ContentChild to pass the template into your component. This forces the template to be defined within the " but still you defined the sharkTemplate outside the app-selector and in
the app-component you are using @ContentChild("optionTemplate").
is this a bug ?

[StephenCooper]

@apenachi you are correct I have conflicting code snippets. I have updated the code snippet now to use @input to be consistent with the text of the article.

I have also added a link to the Stackblitz which demonstrates using both Input and ContentChild along side each other in that note about ContentChild.

[sumit2731]

Great Article. I have small doubt, we you used local reference(#optionTemplate) to reference the template(while passing it as input component or getting it via ContentChildern)some libraries like ngPrime they do not use local reference. I am wondering how they refer to template for ex -

<p-dropdown [options]="countries" [(ngModel)]="selectedCountry" >

{{selectedCountry.name}}

  <ng-template let-country pTemplate="item">
    <div class="country-item">
        <img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" />
        <div>{{country.name}}</div>
    </div>
</ng-template>

here no template reference is placed just this pTemplate thing

[StephenCooper]

Without looking at their source code my best guess is that this is a directive that they are using to retrieve the template from the p-dropdown component.

[alexandis]

Hi, how to handle such situation? Below is a part of my page markup. And the problem is createComponent does not update ngTemplateOutlet source. Probably that's because this part <ng-container *ngTemplateOutlet="licenceContent"></ng-container> is still not initialized by the moment I call initListDialog. Weird, because shown.subscribe should guarantee a whole modal markup readiness... But what do I do?

... page markup
<ng-template --- this is a modal dialog --- >
     ... modal dialog markup
    <div class="form-group row align-items-stretch">
      <ng-container *ngTemplateOutlet="licenceContent"></ng-container>
    </div>
     ... modal dialog markup
</ng-template>
... page markup
<ng-template #licenceContent ---this is what needs to be hydrated dynamically from component--- ></ng-template>

  @ViewChild('licenceContent', { read: ViewContainerRef })
  licenceContent: ViewContainerRef;
  ...
  const listModalRef = this.modalService.open(this.listContent, { centered: true, size: 'xl' });
  listModalRef.shown.subscribe(() => { this.initListDialog(); });
  ...
  initListDialog() {
    this.licenceContent.clear();
    const componentRef = this.licenceContent.createComponent<AbxFixListLicenceComponent>(AbxFixListLicenceComponent); // THE TEMPLATE IS NOT UPDATED! EVEN IF I USE DETECTCHANGES - IT DOES NOT HELP
  }