component within component in angularJS

Question

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>

You don’t see the html for <items-view>? Like it’s not there? — BradP
– BradP, Commented May 7, 2019 at 0:24

Majesty · Accepted Answer · 2019-03-19 11:59:37Z

2

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.

answered Mar 19, 2019 at 11:59

Majesty

2,0895 gold badges32 silver badges57 bronze badges

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

Collectives™ on Stack Overflow

component within component in angularJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related