Angular 1.5 add component dynamically

Question

I have a simple APP where I have a component that gives me data from a parameter.

I want to add this component multiple times when an user clicks on a button, currently I have this:

<div ng-app="myApp" ng-controller="myCtrl"> 

  <my-component></my-component>
  <br />
  <input type="button" ng-click="addComponent()" value="Add New Component"> 

  <div ng-repeat="c in components">
    {{c.content}}
  </div>
</div>

and my .js

angular.module("myApp", []).controller("myCtrl", function ($scope,$compile) {
    $scope.components = [];

    $scope.addComponent = function(){
        $scope.components.push({content: $compile('<my-component></my-component>')});
    }

});

function componentCtrl($scope) {
    this.text = "Hey I'm a component";

}

angular.module("myApp").component('myComponent', {
  template: '<span>{{$ctrl.text}}</span>',
  controller: componentCtrl
});

I tried both with and without $compile but I still can't create the component after the page has loaded, the first component loads fine.

What I expect is that when clicking the button new components with the text: "Hey I'm a component" appear, but instead I get either nothing or literally

<my-component></my-component>

plunker: https://plnkr.co/edit/IQe8ln?p=preview

dfsq · Accepted Answer · 2017-02-26 12:36:07Z

4

You are overthinking. Just put ngRepeat on myComponent:

<my-component ng-repeat="c in components" text="c.text"></my-component>

And maybe something like this in JS:

angular.module("myApp", [])
.controller("myCtrl", function ($scope,$compile) {
    $scope.components = [];

    $scope.addComponent = function(text) {
        $scope.components.push({text: text});
    }
});

function componentCtrl($scope) {
  // something here
}

angular.module("myApp").component('myComponent', {
  template: '<span>{{$ctrl.text}}</span>',
  controller: componentCtrl,
  bindings: {
    text: '='
  }
});

answered Feb 26, 2017 at 12:36

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

1 Comment

Gonzalo Hernandez Over a year ago

you are right, sometimes I got to deep with angular. Thanks!

Collectives™ on Stack Overflow

Angular 1.5 add component dynamically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related