CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-components
Raunak Nandy
Raunak Nandy

Reputation: 51

component within component in angularJS

I have two independent components,defined one within the other in HTML. But my second(inner) component does not populate using the template mentioned in the templateUrl property of the inner component.

//first component
angular.module('app').component('toolCtrl', {
  templateUrl: '/NFRManagementTools/static/js/templates/toolCtrl.html',
  controller: ToolCtrl,
  controllerAs: 'vtc',
});

//second coponent

angular.module('app').component('itemsView', {
  templateURL: '/NFRManagementTools/static/js/templates/itemsView.html',
  controller: ItemsViewCtrl

});
<tool-ctrl>
  <items-view></items-view>
<tool-ctrl>

Upvotes: 0

Views: 1123

Answers (1)

Majesty
Majesty

Reputation: 1919

You are probably looking for transclude option, in your parent component controller add the following option

angular.module('app').component('toolCtrl', {
  transclude: true,
  templateUrl: '/NFRManagementTools/static/js/templates/toolCtrl.html',
  controller: ToolCtrl,
  controllerAs: 'vtc',
});

And in the parent component template you should specify where to place innards by placing specific tag <ng-transclude></ng-transclude>

Checkout the official documentation and here is a similar problem if you have more than one specific element under parent component.

Upvotes: 2

Related Questions