Angular component with template outlet

Question

I have a question component that that multiple implmentations but contains a common title component.

My desire is to create a component such that the template will output the correct type of question given the question model.

I have seen the idea of an ngTemplateOutlet however documentation on how this works is hard to understand (maybe not for you but it is for me) and I'm not sure by looking at the examples how I can implement this. I don't think I have to re-invent the wheel where, this seems like a common requirement.

My previous attempts include an [ngSwitch] container with many different *ngSwitchCase s, however it would be ideal if I could define the templates externally and have the questionComponent aware of the mapping from questionType to available ng-template s.

eg

export class question { 
  constructor(public title: string, public questionType: string, public answer: any) {} 
}

@Component({
  selector: 'app-question',
  template: `
    <div class="question">
      <p>{{q.title}}</p>
      <ng-container [ngTemplateOutlet]="theRightTemplate">
      </ng-container>
    </div>
  `})
export class QuestionComponent {
  @Input()
  question: Question;
}

I'm currently on Angular 7

Can someone please help me figure out how this would be achieved?

Answer 1

ok, i will give u an example and explain to it:

link : https://github.com/100cm/at-ui-angular/blob/master/src/app/components/switch/switch.component.ts

For your code, we must define an @Input variable

export class question { 
  constructor(public title: string, public questionType: string, public answer: any) {} 
}

@Component({
  selector: 'app-question',
  template: `
    <div class="question">
      <p>{{q.title}}</p>
      <ng-container [ngTemplateOutlet]="theRightTemplate">
      </ng-container>
    </div>
  `})
export class QuestionComponent {
  @Input()
  question: Question;
  @Input()
  myTemplate:TemplateRef
}

then change the <ng-container> to <ng-template> (I don't think <ng-container> can used to template outlet

<ng-template [ngTemplateOutlet]="myTemplate">

Ok ,then use your <app-question> now !

what_ever_html:

<app-question [myTemplate]="my_template"></app-question>

<ng-template #my_template> i am worked now !</ng-template>

Hope this could help u !

Answer 2

There are two important things when it comes to making the dynamic component by using the template.

1. Template - First one is template itself which needs to be injected and important point to be noted here is that it require the context which carries additional information, In your case question details.
2. ngTemplateOutlet - where your template needs to be injected. It accept the template and context for the template.

Here is the simple example -

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <ng-container *ngTemplateOutlet="templateRef; context: {entry: entry}"></ng-container>
  <ng-template #templateRef let-entry="entry">My entry is {{entry | json}}</ng-template>
  `,
})
export class AppComponent  {
  entry = {
    label: 'This is a label',
    description: 'Desc',
  }
}

Example 1- https://stackblitz.com/edit/ng-template-outlet-6pzddz

Example 2- https://stackblitz.com/edit/angular-reusable-components-ngtemplateoutlet-5nidmd

Answer 3

You can use @ContentChild('tableHeader') header: TemplateRef<any>; in your QuestionComponent You can use ContentChild to get the first element or the directive matching the selector from the content DOM.

If the content DOM changes, and a new child matches the selector, the property will be updated.

Your child component.html reads as

<ng-template [ngTemplateOutlet]="header"></ng-template> <ng-template [ngTemplateOutlet]="body"></ng-template>

Where [ngTemplateOutlet] will read the property value and paste the content in the specified template

Finally when you refer the content from the parent component it will get placed with the template mentioned above

Method to pass the content from parent to child

<app-question> <ng-template #tableHeader></ng-template> <ng-template #body></ng-template> </app-question>

Any content inside this <ng-template> will be placed inside the child component

In child component you can add as many templates you can where all the templates will be placed with the content passed form the parent component - This is another way to pass content from parent to child - hope this helps - Thanks Happy coding !!

click here for Reference