Have a changable templateUrl

Question

I wonder if it's possible to make the templateUrl depend on an ifelse.

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

@Component({
  selector: "grote-kerk",
  templateUrl: "pages/home/home.html"
})
export class AppComponent {
  // Your TypeScript logic goes here
}

http://stackoverflow.com/questions/31692416/dynamic-template-urls-in-angular-2 — Yoav Schniederman, Feb 28 '17 at 14:06

score 1 · Answer 1 · answered Feb 28 '17 at 14:19

Apart from the suggestion provided in the comments, you can also crete your own structural directive and based on condition to load/unload different layouts. For example take a look at this sample where the contion is checking if the device is iOS or Android one and loading different layouts depending on the OS:

import { Component, Directive, ViewContainerRef, TemplateRef, Inject } from "@angular/core";
import { Device, platformNames } from "platform";
import { DEVICE } from "nativescript-angular/platform-providers";

@Directive({ selector: "[sdkIfAndroid]" })
export class IfAndroidDirective {
    constructor( @Inject(DEVICE) device: Device, container: ViewContainerRef, templateRef: TemplateRef<Object>) {
        if (device.os === platformNames.android) {
            container.createEmbeddedView(templateRef);
        }
    }
}

@Directive({ selector: "[sdkIfIos]" })
export class IfIosDirective {
    constructor( @Inject(DEVICE) device: Device, container: ViewContainerRef, templateRef: TemplateRef<Object>) {
        if (device.os === platformNames.ios) {
            container.createEmbeddedView(templateRef);
        }
    }
}

@Component({
    moduleId: module.id,
    templateUrl: "./create-custom-directive.component.html",
})
export class CreateCustomDirectiveExampleComponent {
}

And the HTML part where the directive is used:

<GridLayout *sdkIfAndroid width="300" height="300" backgroundColor="#a4c639"></GridLayout>
<GridLayout *sdkIfIos width="300" height="300" backgroundColor="#0099CC"></GridLayout>

Full example can be found here

Have a changable templateUrl

1 Answers1