Angular (1.5.8) Dynamic Components












16















I'm trying to build a sort of dynamic dashboard using Angular 1.5.8. I've made decent progress up until the final hurdle. Which is actually rendering the dynamic component.



I've tried 2 options, either adding a ui-view and programatically passing in the name of the widget, or, and this is the route I'm guessing is more correct, I need to figure out how to render a dynamic widget.



For Example: As I append and item to the dashItems collection, it should render a new widget (based on the name I've provided)



I have seen that I can swap out templates using ngInclude, but I'm still unclear as to how to get a template and controller to be injected dynamically. (EG all my templates wont be sharing a common controller).



JavaScript:



angular
.module('myDashboard', )
.config(routesConfig)
.component('dashboard', {
templateUrl: 'dashboard/dashboard.tpl.html',
controller: dashboardController
})
.component('widgetPie', {
template: '<h3>Pie Graph</h3>',
controller: function($log) {
$log.info('widgetPie: loaded');
}
})
.component('widgetLine', {
template: '<h3>Line Graph</h3>',
controller: function($log) {
$log.info('WidgetLine: loaded');
}
});

function routesConfig($stateProvider) {
// this is only needed if I go the ui-view route.. I assume
$stateProvider
.state('widgetPie', { component: 'widgetPie'})
.state('widgetLine', { component: 'widgetLine'});
}

function dashboardController($log) {
$log.info('in dashboard');
this.dashItems = [
{ widget:'widgetPie' },
{ widget:'widgetLine' }
];
}


Markup (dashboard/dashboard.tpl.html):



<div>
<ul>
<li ng-repeat="item in dashItems">
<!--somehow render dynamic-->
<!--<widget-pie></widget-pie>-->
<!--<div ui-view="item.widget"></div>-->
</li>
</ul>
</div>


Question(s):



1.
I've looked into ngInclude, but to be perfectly honest, I'm not sure how to go about using it in this instance, and IF it is the right tool for this, or am I approaching this incorrectly?



2.
Should I even be adding items to the state provider for this, EG i / could a widget be seen as a child state (thus I'm not sure what would be seen as best practice)










share|improve this question

























  • Have you read up on directives?

    – Larry Turtis
    Nov 16 '16 at 14:16






  • 1





    @LarryTurtis yes, I am familiar with directives and how they work for the most part, but not with regards to having them (or components) render dynamically such as in my question, i'm still somewhat in the dark

    – Rohan Büchner
    Nov 16 '16 at 14:30






  • 1





    I might be misunderstanding the intention, but would you be able to dynamically compile directives and add them to the page, as described in this post?

    – Larry Turtis
    Nov 16 '16 at 14:38






  • 1





    @estus please correct me if Im wrong (and I might be / probably are), but I'm not wanting to just dynamically swap out templates... thus they wont have the same controller in the back. I want to swap out a dynamic template and controller? Isn't this a different scenario?

    – Rohan Büchner
    Nov 16 '16 at 16:03






  • 1





    A template should contain a desired component.

    – estus
    Nov 16 '16 at 16:14
















16















I'm trying to build a sort of dynamic dashboard using Angular 1.5.8. I've made decent progress up until the final hurdle. Which is actually rendering the dynamic component.



I've tried 2 options, either adding a ui-view and programatically passing in the name of the widget, or, and this is the route I'm guessing is more correct, I need to figure out how to render a dynamic widget.



For Example: As I append and item to the dashItems collection, it should render a new widget (based on the name I've provided)



I have seen that I can swap out templates using ngInclude, but I'm still unclear as to how to get a template and controller to be injected dynamically. (EG all my templates wont be sharing a common controller).



JavaScript:



angular
.module('myDashboard', )
.config(routesConfig)
.component('dashboard', {
templateUrl: 'dashboard/dashboard.tpl.html',
controller: dashboardController
})
.component('widgetPie', {
template: '<h3>Pie Graph</h3>',
controller: function($log) {
$log.info('widgetPie: loaded');
}
})
.component('widgetLine', {
template: '<h3>Line Graph</h3>',
controller: function($log) {
$log.info('WidgetLine: loaded');
}
});

function routesConfig($stateProvider) {
// this is only needed if I go the ui-view route.. I assume
$stateProvider
.state('widgetPie', { component: 'widgetPie'})
.state('widgetLine', { component: 'widgetLine'});
}

function dashboardController($log) {
$log.info('in dashboard');
this.dashItems = [
{ widget:'widgetPie' },
{ widget:'widgetLine' }
];
}


Markup (dashboard/dashboard.tpl.html):



<div>
<ul>
<li ng-repeat="item in dashItems">
<!--somehow render dynamic-->
<!--<widget-pie></widget-pie>-->
<!--<div ui-view="item.widget"></div>-->
</li>
</ul>
</div>


Question(s):



1.
I've looked into ngInclude, but to be perfectly honest, I'm not sure how to go about using it in this instance, and IF it is the right tool for this, or am I approaching this incorrectly?



2.
Should I even be adding items to the state provider for this, EG i / could a widget be seen as a child state (thus I'm not sure what would be seen as best practice)










share|improve this question

























  • Have you read up on directives?

    – Larry Turtis
    Nov 16 '16 at 14:16






  • 1





    @LarryTurtis yes, I am familiar with directives and how they work for the most part, but not with regards to having them (or components) render dynamically such as in my question, i'm still somewhat in the dark

    – Rohan Büchner
    Nov 16 '16 at 14:30






  • 1





    I might be misunderstanding the intention, but would you be able to dynamically compile directives and add them to the page, as described in this post?

    – Larry Turtis
    Nov 16 '16 at 14:38






  • 1





    @estus please correct me if Im wrong (and I might be / probably are), but I'm not wanting to just dynamically swap out templates... thus they wont have the same controller in the back. I want to swap out a dynamic template and controller? Isn't this a different scenario?

    – Rohan Büchner
    Nov 16 '16 at 16:03






  • 1





    A template should contain a desired component.

    – estus
    Nov 16 '16 at 16:14














16












16








16


9






I'm trying to build a sort of dynamic dashboard using Angular 1.5.8. I've made decent progress up until the final hurdle. Which is actually rendering the dynamic component.



I've tried 2 options, either adding a ui-view and programatically passing in the name of the widget, or, and this is the route I'm guessing is more correct, I need to figure out how to render a dynamic widget.



For Example: As I append and item to the dashItems collection, it should render a new widget (based on the name I've provided)



I have seen that I can swap out templates using ngInclude, but I'm still unclear as to how to get a template and controller to be injected dynamically. (EG all my templates wont be sharing a common controller).



JavaScript:



angular
.module('myDashboard', )
.config(routesConfig)
.component('dashboard', {
templateUrl: 'dashboard/dashboard.tpl.html',
controller: dashboardController
})
.component('widgetPie', {
template: '<h3>Pie Graph</h3>',
controller: function($log) {
$log.info('widgetPie: loaded');
}
})
.component('widgetLine', {
template: '<h3>Line Graph</h3>',
controller: function($log) {
$log.info('WidgetLine: loaded');
}
});

function routesConfig($stateProvider) {
// this is only needed if I go the ui-view route.. I assume
$stateProvider
.state('widgetPie', { component: 'widgetPie'})
.state('widgetLine', { component: 'widgetLine'});
}

function dashboardController($log) {
$log.info('in dashboard');
this.dashItems = [
{ widget:'widgetPie' },
{ widget:'widgetLine' }
];
}


Markup (dashboard/dashboard.tpl.html):



<div>
<ul>
<li ng-repeat="item in dashItems">
<!--somehow render dynamic-->
<!--<widget-pie></widget-pie>-->
<!--<div ui-view="item.widget"></div>-->
</li>
</ul>
</div>


Question(s):



1.
I've looked into ngInclude, but to be perfectly honest, I'm not sure how to go about using it in this instance, and IF it is the right tool for this, or am I approaching this incorrectly?



2.
Should I even be adding items to the state provider for this, EG i / could a widget be seen as a child state (thus I'm not sure what would be seen as best practice)










share|improve this question
















I'm trying to build a sort of dynamic dashboard using Angular 1.5.8. I've made decent progress up until the final hurdle. Which is actually rendering the dynamic component.



I've tried 2 options, either adding a ui-view and programatically passing in the name of the widget, or, and this is the route I'm guessing is more correct, I need to figure out how to render a dynamic widget.



For Example: As I append and item to the dashItems collection, it should render a new widget (based on the name I've provided)



I have seen that I can swap out templates using ngInclude, but I'm still unclear as to how to get a template and controller to be injected dynamically. (EG all my templates wont be sharing a common controller).



JavaScript:



angular
.module('myDashboard', )
.config(routesConfig)
.component('dashboard', {
templateUrl: 'dashboard/dashboard.tpl.html',
controller: dashboardController
})
.component('widgetPie', {
template: '<h3>Pie Graph</h3>',
controller: function($log) {
$log.info('widgetPie: loaded');
}
})
.component('widgetLine', {
template: '<h3>Line Graph</h3>',
controller: function($log) {
$log.info('WidgetLine: loaded');
}
});

function routesConfig($stateProvider) {
// this is only needed if I go the ui-view route.. I assume
$stateProvider
.state('widgetPie', { component: 'widgetPie'})
.state('widgetLine', { component: 'widgetLine'});
}

function dashboardController($log) {
$log.info('in dashboard');
this.dashItems = [
{ widget:'widgetPie' },
{ widget:'widgetLine' }
];
}


Markup (dashboard/dashboard.tpl.html):



<div>
<ul>
<li ng-repeat="item in dashItems">
<!--somehow render dynamic-->
<!--<widget-pie></widget-pie>-->
<!--<div ui-view="item.widget"></div>-->
</li>
</ul>
</div>


Question(s):



1.
I've looked into ngInclude, but to be perfectly honest, I'm not sure how to go about using it in this instance, and IF it is the right tool for this, or am I approaching this incorrectly?



2.
Should I even be adding items to the state provider for this, EG i / could a widget be seen as a child state (thus I'm not sure what would be seen as best practice)







angularjs dynamic components angularjs-ng-include






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Mar 19 '18 at 6:13







Rohan Büchner

















asked Nov 16 '16 at 13:41









Rohan BüchnerRohan Büchner

3,67235191




3,67235191













  • Have you read up on directives?

    – Larry Turtis
    Nov 16 '16 at 14:16






  • 1





    @LarryTurtis yes, I am familiar with directives and how they work for the most part, but not with regards to having them (or components) render dynamically such as in my question, i'm still somewhat in the dark

    – Rohan Büchner
    Nov 16 '16 at 14:30






  • 1





    I might be misunderstanding the intention, but would you be able to dynamically compile directives and add them to the page, as described in this post?

    – Larry Turtis
    Nov 16 '16 at 14:38






  • 1





    @estus please correct me if Im wrong (and I might be / probably are), but I'm not wanting to just dynamically swap out templates... thus they wont have the same controller in the back. I want to swap out a dynamic template and controller? Isn't this a different scenario?

    – Rohan Büchner
    Nov 16 '16 at 16:03






  • 1





    A template should contain a desired component.

    – estus
    Nov 16 '16 at 16:14



















  • Have you read up on directives?

    – Larry Turtis
    Nov 16 '16 at 14:16






  • 1





    @LarryTurtis yes, I am familiar with directives and how they work for the most part, but not with regards to having them (or components) render dynamically such as in my question, i'm still somewhat in the dark

    – Rohan Büchner
    Nov 16 '16 at 14:30






  • 1





    I might be misunderstanding the intention, but would you be able to dynamically compile directives and add them to the page, as described in this post?

    – Larry Turtis
    Nov 16 '16 at 14:38






  • 1





    @estus please correct me if Im wrong (and I might be / probably are), but I'm not wanting to just dynamically swap out templates... thus they wont have the same controller in the back. I want to swap out a dynamic template and controller? Isn't this a different scenario?

    – Rohan Büchner
    Nov 16 '16 at 16:03






  • 1





    A template should contain a desired component.

    – estus
    Nov 16 '16 at 16:14

















Have you read up on directives?

– Larry Turtis
Nov 16 '16 at 14:16





Have you read up on directives?

– Larry Turtis
Nov 16 '16 at 14:16




1




1





@LarryTurtis yes, I am familiar with directives and how they work for the most part, but not with regards to having them (or components) render dynamically such as in my question, i'm still somewhat in the dark

– Rohan Büchner
Nov 16 '16 at 14:30





@LarryTurtis yes, I am familiar with directives and how they work for the most part, but not with regards to having them (or components) render dynamically such as in my question, i'm still somewhat in the dark

– Rohan Büchner
Nov 16 '16 at 14:30




1




1





I might be misunderstanding the intention, but would you be able to dynamically compile directives and add them to the page, as described in this post?

– Larry Turtis
Nov 16 '16 at 14:38





I might be misunderstanding the intention, but would you be able to dynamically compile directives and add them to the page, as described in this post?

– Larry Turtis
Nov 16 '16 at 14:38




1




1





@estus please correct me if Im wrong (and I might be / probably are), but I'm not wanting to just dynamically swap out templates... thus they wont have the same controller in the back. I want to swap out a dynamic template and controller? Isn't this a different scenario?

– Rohan Büchner
Nov 16 '16 at 16:03





@estus please correct me if Im wrong (and I might be / probably are), but I'm not wanting to just dynamically swap out templates... thus they wont have the same controller in the back. I want to swap out a dynamic template and controller? Isn't this a different scenario?

– Rohan Büchner
Nov 16 '16 at 16:03




1




1





A template should contain a desired component.

– estus
Nov 16 '16 at 16:14





A template should contain a desired component.

– estus
Nov 16 '16 at 16:14












2 Answers
2






active

oldest

votes


















19














I ended up changing the dashboard.tpl.html file to:



<div>
<ul>
<li ng-repeat="item in dashItems">
<div ng-include="item.widget"></div>
</li>
</ul>
</div>


But I also needed to add a build task to run through my widgets folder and generate the following (or you can manually add, whatever floats your boat I guess).



angular
.module('myDashboard')
.run(function ($templateCache) {
$templateCache.put('widgetPie', '<widget-pie></widget-pie>');
$templateCache.put('widgetLine', '<widget-line></widget-line>');
});


The above allows me to either use templateUrl, or inline templates.



.component('widgetPie', {
templateUrl: 'dashboard/widgetPie.tpl.html',
controller: function($log) {
$log.info('widgetPie: loaded');
}
})
.component('widgetLine', {
template: '<h1>Some Content</h1>',
controller: function($log) {
$log.info('widgetLine: loaded');
}
})





share|improve this answer

































    2














    You can do it. Firstly, you need to use wrapper component which helps you compile your dynamic component:



    app.component('dynamicWrapper',
    {
    controller: function widgetClientCtrl($scope, $compile, $element) {
    var self = this;
    self.$onInit = function () {
    renderWidget(self.name, self.payload);
    };
    function renderWidget(name, payload) {
    var template = '<' + name;

    if (payload) {
    $scope.payload = payload;
    template += ' payload="payload"';
    }

    template += '></' + name + '>';
    $element.append($compile(template)($scope));
    }
    },
    bindings: {
    name: '@',
    payload: '=?'
    }
    });


    your dynamic component:



    app.component('someDynamicComponent', {
    templateUrl: 'yourPath',
    controller: dynamicComponentCtrl,
    controllerAs: 'vm',
    bindings: {
    payload: '<'
    }
    });


    and then:



    <li ng-repeat="(name, payload) in vm.dynamicComponents">
    <dynamic-wrapper name="{{name}}" payload="payload"></dynamic-wrapper>
    </li>





    share|improve this answer

























      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f40633648%2fangular-1-5-8-dynamic-components%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      19














      I ended up changing the dashboard.tpl.html file to:



      <div>
      <ul>
      <li ng-repeat="item in dashItems">
      <div ng-include="item.widget"></div>
      </li>
      </ul>
      </div>


      But I also needed to add a build task to run through my widgets folder and generate the following (or you can manually add, whatever floats your boat I guess).



      angular
      .module('myDashboard')
      .run(function ($templateCache) {
      $templateCache.put('widgetPie', '<widget-pie></widget-pie>');
      $templateCache.put('widgetLine', '<widget-line></widget-line>');
      });


      The above allows me to either use templateUrl, or inline templates.



      .component('widgetPie', {
      templateUrl: 'dashboard/widgetPie.tpl.html',
      controller: function($log) {
      $log.info('widgetPie: loaded');
      }
      })
      .component('widgetLine', {
      template: '<h1>Some Content</h1>',
      controller: function($log) {
      $log.info('widgetLine: loaded');
      }
      })





      share|improve this answer






























        19














        I ended up changing the dashboard.tpl.html file to:



        <div>
        <ul>
        <li ng-repeat="item in dashItems">
        <div ng-include="item.widget"></div>
        </li>
        </ul>
        </div>


        But I also needed to add a build task to run through my widgets folder and generate the following (or you can manually add, whatever floats your boat I guess).



        angular
        .module('myDashboard')
        .run(function ($templateCache) {
        $templateCache.put('widgetPie', '<widget-pie></widget-pie>');
        $templateCache.put('widgetLine', '<widget-line></widget-line>');
        });


        The above allows me to either use templateUrl, or inline templates.



        .component('widgetPie', {
        templateUrl: 'dashboard/widgetPie.tpl.html',
        controller: function($log) {
        $log.info('widgetPie: loaded');
        }
        })
        .component('widgetLine', {
        template: '<h1>Some Content</h1>',
        controller: function($log) {
        $log.info('widgetLine: loaded');
        }
        })





        share|improve this answer




























          19












          19








          19







          I ended up changing the dashboard.tpl.html file to:



          <div>
          <ul>
          <li ng-repeat="item in dashItems">
          <div ng-include="item.widget"></div>
          </li>
          </ul>
          </div>


          But I also needed to add a build task to run through my widgets folder and generate the following (or you can manually add, whatever floats your boat I guess).



          angular
          .module('myDashboard')
          .run(function ($templateCache) {
          $templateCache.put('widgetPie', '<widget-pie></widget-pie>');
          $templateCache.put('widgetLine', '<widget-line></widget-line>');
          });


          The above allows me to either use templateUrl, or inline templates.



          .component('widgetPie', {
          templateUrl: 'dashboard/widgetPie.tpl.html',
          controller: function($log) {
          $log.info('widgetPie: loaded');
          }
          })
          .component('widgetLine', {
          template: '<h1>Some Content</h1>',
          controller: function($log) {
          $log.info('widgetLine: loaded');
          }
          })





          share|improve this answer















          I ended up changing the dashboard.tpl.html file to:



          <div>
          <ul>
          <li ng-repeat="item in dashItems">
          <div ng-include="item.widget"></div>
          </li>
          </ul>
          </div>


          But I also needed to add a build task to run through my widgets folder and generate the following (or you can manually add, whatever floats your boat I guess).



          angular
          .module('myDashboard')
          .run(function ($templateCache) {
          $templateCache.put('widgetPie', '<widget-pie></widget-pie>');
          $templateCache.put('widgetLine', '<widget-line></widget-line>');
          });


          The above allows me to either use templateUrl, or inline templates.



          .component('widgetPie', {
          templateUrl: 'dashboard/widgetPie.tpl.html',
          controller: function($log) {
          $log.info('widgetPie: loaded');
          }
          })
          .component('widgetLine', {
          template: '<h1>Some Content</h1>',
          controller: function($log) {
          $log.info('widgetLine: loaded');
          }
          })






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Mar 19 '18 at 6:15

























          answered Nov 16 '16 at 19:08









          Rohan BüchnerRohan Büchner

          3,67235191




          3,67235191

























              2














              You can do it. Firstly, you need to use wrapper component which helps you compile your dynamic component:



              app.component('dynamicWrapper',
              {
              controller: function widgetClientCtrl($scope, $compile, $element) {
              var self = this;
              self.$onInit = function () {
              renderWidget(self.name, self.payload);
              };
              function renderWidget(name, payload) {
              var template = '<' + name;

              if (payload) {
              $scope.payload = payload;
              template += ' payload="payload"';
              }

              template += '></' + name + '>';
              $element.append($compile(template)($scope));
              }
              },
              bindings: {
              name: '@',
              payload: '=?'
              }
              });


              your dynamic component:



              app.component('someDynamicComponent', {
              templateUrl: 'yourPath',
              controller: dynamicComponentCtrl,
              controllerAs: 'vm',
              bindings: {
              payload: '<'
              }
              });


              and then:



              <li ng-repeat="(name, payload) in vm.dynamicComponents">
              <dynamic-wrapper name="{{name}}" payload="payload"></dynamic-wrapper>
              </li>





              share|improve this answer






























                2














                You can do it. Firstly, you need to use wrapper component which helps you compile your dynamic component:



                app.component('dynamicWrapper',
                {
                controller: function widgetClientCtrl($scope, $compile, $element) {
                var self = this;
                self.$onInit = function () {
                renderWidget(self.name, self.payload);
                };
                function renderWidget(name, payload) {
                var template = '<' + name;

                if (payload) {
                $scope.payload = payload;
                template += ' payload="payload"';
                }

                template += '></' + name + '>';
                $element.append($compile(template)($scope));
                }
                },
                bindings: {
                name: '@',
                payload: '=?'
                }
                });


                your dynamic component:



                app.component('someDynamicComponent', {
                templateUrl: 'yourPath',
                controller: dynamicComponentCtrl,
                controllerAs: 'vm',
                bindings: {
                payload: '<'
                }
                });


                and then:



                <li ng-repeat="(name, payload) in vm.dynamicComponents">
                <dynamic-wrapper name="{{name}}" payload="payload"></dynamic-wrapper>
                </li>





                share|improve this answer




























                  2












                  2








                  2







                  You can do it. Firstly, you need to use wrapper component which helps you compile your dynamic component:



                  app.component('dynamicWrapper',
                  {
                  controller: function widgetClientCtrl($scope, $compile, $element) {
                  var self = this;
                  self.$onInit = function () {
                  renderWidget(self.name, self.payload);
                  };
                  function renderWidget(name, payload) {
                  var template = '<' + name;

                  if (payload) {
                  $scope.payload = payload;
                  template += ' payload="payload"';
                  }

                  template += '></' + name + '>';
                  $element.append($compile(template)($scope));
                  }
                  },
                  bindings: {
                  name: '@',
                  payload: '=?'
                  }
                  });


                  your dynamic component:



                  app.component('someDynamicComponent', {
                  templateUrl: 'yourPath',
                  controller: dynamicComponentCtrl,
                  controllerAs: 'vm',
                  bindings: {
                  payload: '<'
                  }
                  });


                  and then:



                  <li ng-repeat="(name, payload) in vm.dynamicComponents">
                  <dynamic-wrapper name="{{name}}" payload="payload"></dynamic-wrapper>
                  </li>





                  share|improve this answer















                  You can do it. Firstly, you need to use wrapper component which helps you compile your dynamic component:



                  app.component('dynamicWrapper',
                  {
                  controller: function widgetClientCtrl($scope, $compile, $element) {
                  var self = this;
                  self.$onInit = function () {
                  renderWidget(self.name, self.payload);
                  };
                  function renderWidget(name, payload) {
                  var template = '<' + name;

                  if (payload) {
                  $scope.payload = payload;
                  template += ' payload="payload"';
                  }

                  template += '></' + name + '>';
                  $element.append($compile(template)($scope));
                  }
                  },
                  bindings: {
                  name: '@',
                  payload: '=?'
                  }
                  });


                  your dynamic component:



                  app.component('someDynamicComponent', {
                  templateUrl: 'yourPath',
                  controller: dynamicComponentCtrl,
                  controllerAs: 'vm',
                  bindings: {
                  payload: '<'
                  }
                  });


                  and then:



                  <li ng-repeat="(name, payload) in vm.dynamicComponents">
                  <dynamic-wrapper name="{{name}}" payload="payload"></dynamic-wrapper>
                  </li>






                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Nov 21 '18 at 11:40

























                  answered Nov 20 '18 at 17:23









                  eugene.sushilnikoveugene.sushilnikov

                  876178




                  876178






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f40633648%2fangular-1-5-8-dynamic-components%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      Guess what letter conforming each word

                      Port of Spain

                      Run scheduled task as local user group (not BUILTIN)