angularjs component with dynamic templateUrl

Question

is it possible to create a AngularJS Component with a dynamic templateUrl? Means I want to inject a service into the Component that gives me a base path to the template:

i.e.: templateUrl: configuration.baseScriptPath + '...html'

It is possible with a Directive, but how to do this with a Component?

angular.module('runtime')
    .component('textInput', {

        templateUrl: /*configuration.baseScriptPath + */'fd/components/text_input_instance.html',
        controller: [
            '$scope', '$element', 'focusInputGroup', 'configuration',
            function ($scope, $element, focusInputGroup, configuration) {

If it is working in directive, it should work in Component as well because 'templateUrl' property is not modified.. — Muthukannan Kanniappan
– Muthukannan Kanniappan, Commented Jun 22, 2016 at 10:33
I want to inject configuration so that it is useable in templateUrl. — dec
– dec, Commented Jun 22, 2016 at 10:37
Just added. The comment shows what I want to accomplish, but how can configuration be injected? — dec
– dec, Commented Jun 22, 2016 at 10:49

Tomer · Accepted Answer · 2017-01-17 08:20:20Z

9

Instead of templateUrl you can use template and ng-include, like this:

angular.module('runtime')
    .component('textInput', {

        template: '<div ng-include="getTemplate()">',
        controller: [
            '$scope', '$element', 'focusInputGroup', 'configuration',
            function ($scope, $element, focusInputGroup, configuration) {

           $scope.getTemplate = function () {
               return configuration.baseScriptPath + 'fd/components/text_input_instance.html';
          };

edited Jan 17, 2017 at 8:20

answered Jun 22, 2016 at 10:58

Tomer

17.9k16 gold badges82 silver badges139 bronze badges

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

Comments

hannad rehman · Accepted Answer · 2017-08-10 07:03:14Z

7

templateUrl property of component also takes a function. so you can try this,

angular.module('runtime')
  .component('textInput', {

      templateUrl: ['$configuration', function($configuration) {
        return $configuration.basepath + '.html'
      }],
      controller: [
          '$scope', '$element', 'focusInputGroup', 'configuration',
          function($scope, $element, focusInputGroup, configuration) {

edited Aug 10, 2017 at 7:03

answered May 18, 2017 at 7:34

hannad rehman

4,4215 gold badges39 silver badges60 bronze badges

2 Comments

m.e.conroy Over a year ago

Should be templateUrl: [...], otherwise it will just print the HTML template file name as template is a string.

hannad rehman Over a year ago

correct. i am used to use <component-name></component-name> .

Collectives™ on Stack Overflow

angularjs component with dynamic templateUrl

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related