Component Templating

Question

I'm an angular novice, currently building an angular2 app.

What I want to do is generate a series of DOM components from the following object data:

// Class construct with alphabeticalized properties
export class Screens {
    screens: Array<Object>;
}


export var screenData: Screens = {
    // Lists all of the audio files in the course 
    screens: [
        {
            id: 0,
            template: 'templateURL-0.html',
            css: 'templateURL-0.css'
        },
        {
            id: 1,
            template: 'templateURL-1.html',
            css: 'templateURL-1.css'
        },
        {
            id: 2,
            template: 'templateURL-0.html',
            css: 'templateURL-0.css'
        }
    ]
};

I want the end result to be something similar to the following where template 0 will be displayed twice, and template 1 once; in order:

<app-screen></app-screen> <!--  templateURL-0.html content  -->
<app-screen></app-screen> <!--  templateURL-1.html content  -->
<app-screen></app-screen> <!--  templateURL-0.html content  -->

I read the tutorial on Structural Directives and I think I need to implement something along those lines, however I'm honestly feeling a little lost on the best approach.

Ideally I would like to have something like:

<app-screen *ngFor="let screen of screenData.screens"></app-screen>

Which would then somehow set the template URL depending on what screenData.screens.template is.

Or should I do something like this? (unsure if correct syntax)

<div *ngFor="let screen of screenData.screens" [ngSwitch]="screenData.screens.template">
  <app-screen-template1 [ngSwitchCase]="'templateURL-0.html'"></app-screen-template1>
  <app-screen-template2 [ngSwitchCase]="'templateURL-1.html'">Ready</app-screen-template2>
</div>

Note: I will never change the templateURL reference.

Possible duplicate of [Dynamic template URLs in Angular 2](http://stackoverflow.com/questions/31692416/dynamic-template-urls-in-angular-2) — Vova Bilyachat, Jan 18 '17 at 03:14
@VolodymyrBilyachat I was under the impression that question was relating to changing template 'on the fly' not from const data. — Zze, Jan 18 '17 at 03:17
My fault check this one http://stackoverflow.com/questions/38550255/switch-html-templates-dynamically-during-runtime-on-user-action-in-angular-2 — Vova Bilyachat, Jan 18 '17 at 03:20
@VolodymyrBilyachat The second is much closer to my requirements, however I still can't use this answer because (from my understanding) `ngTemplateOutlet` can't be used with URL references. — Zze, Jan 18 '17 at 03:32
Yes but what is stopping you to download that template and supply as a string? — Vova Bilyachat, Jan 18 '17 at 03:33
@VolodymyrBilyachat Becuase there could be hundreds of components required, each with thousands of lines contained within - would be a coding nightmare and horrible to work with in a team environment. — Zze, Jan 18 '17 at 03:35

score 0 · Accepted Answer · answered Jan 24 '17 at 23:52

I found that the best method to achieve this is to implement routing with the built in RouterModule.

So in the end I have the following in my class, where the template property is a url path / url segment.

// Class construct with alphabeticalized properties
export class Screens {
    screens: Array<Object>;
}


export var screenData: Screens = {
    // Lists all of the audio files in the course 
    screens: [
        {
            id: 0,
            template: 'template/template-0'
        }
    ]
};

Then when I want to load / instantiate this template, all I have to do is navigate to this url using something like:

 <button [routerLink]="[screen.template]"></button>

Where screenis a bound variable in my .ts.

Component Templating

1 Answers1