templateUrl with a function in angular2

Question

Well... in angular 1.x.y is

angular.module('myApp', []).directive('myDirective', function(){
    return {
       templateUrl : function(tElement, iAttrs){
           return 'http://' + iAttrs.myDirective // More...
       } 
    }
});

But.. In Angular2

@Component({
    selector: 'my-Directive',
    templateUrl: 'http://???' 
})
class HelloWorld {
}

Well, in the doc say only a String. As it is handled to be a function in angular2 ?

Its kind of similar question as this question with no answer... — Pankaj Parkar
– Pankaj Parkar, Commented Mar 18, 2016 at 7:58
@pixelbits OP wanted to have, dynamic templateUrl based on value passed from parent component.. the similar question I asked yesterday but didn't find any answer.. could you looked at my previous comment too. — Pankaj Parkar
– Pankaj Parkar, Commented Mar 18, 2016 at 8:10
Component templates are compiled at runtime in Angular 2 by the Angular Compiler. Therefore you can't choose your template dynamically with a function. EDIT: You could solve this problem by creating a component, which is using the dynamic component loader to dynamically create a component and then display it within your parent component. — Thomas Gassmann
– Thomas Gassmann, Commented Sep 3, 2017 at 11:09

Silvio · Accepted Answer · 2017-10-16 20:28:41Z

0

I had to implement something similar and my solution was the same as Thomas Gassmann's comment above, so I decided to share.

Currently (angular 4.4.5) @Component decorator only accepts a string, therefore the template is not dynamically compiled like on angularJS. However you can implement multiple components and switch the component dynamically. Example below:

https://stackblitz.com/edit/angular-dynamic-templateurl

answered Oct 16, 2017 at 20:28

Silvio

6,0662 gold badges19 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jamlfy Over a year ago

The idea, is the templetes in de server say errors/timeout.html, errors/input_error.html .... Etc

Collectives™ on Stack Overflow

templateUrl with a function in angular2

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related