2

This question is related to ngTemplateOutlet with dynamic value

Following this example, there is a @ViewChild('one') one:TemplateRef<any>; for each template.

I'm doing a application which is essentially an eBook. Currently I have a <ng-template #pagexx> for each page. Any way to avoid having the @ViewChild for everypage? This will get quite tedious for a large set of pages.

Looking for a way that expression can be passed in from component.ts and have the expression evaluate to page6 or page7 ...

Thanks for any help.

phil magnuson
  • 71
  • 1
  • 9
  • 4
    Please provide more code to make it more clear what you try to accomplish, what you tried and where you failed – Günter Zöchbauer Mar 11 '18 at 15:25
  • Thanks for looking at this. In the `.html` ` ` correctly selects a template ``. In the associated `.ts`, there is this assignment: `templatePage="page6";`. However `[ngTemplateOutlet]=templatePage` produces an error. – phil magnuson Mar 11 '18 at 17:17
  • Please edit the question and add the code there. Code in comments is hard to read. Please also add more code than in the comment. You use abstract terms in your question like page that doesn't tell anything about how stuff is related to each other. If there is an error, please provide the full and exact error message – Günter Zöchbauer Mar 11 '18 at 17:28
  • please see code at https://plnkr.co/edit/aps6z9NJlRAkx6hVMxug?p=preview. on line 14, I would like to use something similar to `` however this produces an error. How can I the `templatePage` variable from the class definition? – phil magnuson Mar 11 '18 at 17:48

1 Answers1

1

A template variable is not a string, it's an element or component reference. You can get a hold of it for example using @ViewChild()

@Component({
  selector: 'my-app',
  template: `
      <h3>templatePage = {{page}}</h3>

      <button (click)="page = page == page1 ? page2 : page1">toggle</button>

       <ng-container [ngTemplateOutlet]="page1"></ng-container>

       <ng-container [ngTemplateOutlet]="page2"></ng-container>

       <ng-container [ngTemplateOutlet]="page"></ng-container>

      <ng-template #tPage1>page 1</ng-template>
      <ng-template #tPage2>page 2</ng-template>

  `,
})
export class App {
  @ViewChild('tPage1') page1:TemplateRef;
  @ViewChild('tPage2') page2:TemplateRef;
  page:TemplateRef;

  name:string;
  templatePage:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

Plunker example

Plunker example with ViewChildren

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Thank you so much for all your help. I have 100+ pages, so I'm trying to find a way build an array of the TemplateRef or build the TemplateRef dynamically. My research so far shows this is not possible. – phil magnuson Mar 11 '18 at 20:51
  • I really appreciate your help on this one. Getting closer. However I am not finding `@QueryChildren` anywhere in Angular. I was able to get very close with `@ViewChildren(TemplateRef) pageList: QueryList >;`. This returns all the `` elements and appears to also be picking up the `` child as well. Thanks again. – phil magnuson Mar 13 '18 at 12:15
  • @philmagnuson sorry, I guess I was ripe for bed when I wrote that. I meant `ViewChildren`. Sorry for the confusion. – Günter Zöchbauer Mar 13 '18 at 12:38
  • 2
    Gunther has answered the question quite well to help me find the solution. I finally am using `` and `@ViewChildren('page') pageList: QueryList >;`. Thank you for all the help . – phil magnuson Mar 14 '18 at 22:19