templateUrl by variable

[Long Field]

Have try a lot, couldn't find out how to do this: templateUrl dynamically from a variable/property,  [Url], {{URL}}, "[Url]", "{{Url}}", none of them work

@Component({

templateUrl:  Url

})

export class App {

public Url  = "app/about.html";

 }

[michael corbridge]

I'm pretty sure you have to declare that var outside the class. Let me try and I'll let you know.

[Sander Elias]

Hi Long,

You have to declare that variable before you define your class. At the time the @component decorator runs, your class is not there yet.

Regards

Sander

[Long Field]

Hi Sander

I need my class to get data from backend and then I can know which templateUrl to use?

Or should I use @input in templateUrl ?

[Günter Zöchbauer]

http://stackoverflow.com/questions/31692416/dynamic-template-urls-in-angular-2

[Long Field]

On Tuesday, January 12, 2016 at 7:01:38 PM UTC+11, Günter Zöchbauer wrote:

http://stackoverflow.com/questions/31692416/dynamic-template-urls-in-angular-2
Hi Gunter

  It looks like a missing function, follow doc. both template and tenplateUrl as ?string but why we can use {{url}} inside template string but not templateUrl string?

[Günter Zöchbauer]

`templateUrl` points to a file containing a string where you can use binding/{{}}, you can't for `templateUrl` itself. It just points to a file.

`template` is for inline template and there you can use binding/{{}}.

[Long Field]

I knew I cann't, just not happy this limitation, I wanta it point to different files according to data read from backend

[Sander Elias]

Hi Long,

Then read the data before initializing the directive. If this is crucial to your app, you can use xmlHttpRequest, or Fetch to get the data before you directive gets initialized.

Regards

Sander

[Arslan Munir]

In my case, i wanted to use two different html templates with different css frameworks. Bulma and bootstrap. Just for testing purposes. I switched the templates based on the environment variable.

In environment file

export const environment = {

  useBulma: true

};

and in component

import { environment } from 'src/environments/environment';

@Component({

      selector: 'app-test',

      templateUrl: environment.useBulma ? './with-bulma.component.html' : './with-bootstrap.component.html',

      styleUrls: ['./value.component.css']

    })