In the process of constructing a panel component using angular 1.5, I am looking to embed some markup into this template (which has been simplified):
<div class="panel">
<h1>{{ $ctrl.title }}</h1>
<div ng-transclude="menu"></div>
<div ng-transclude="form" ng-if="$ctrl.formExpanded"></div>
<div ng-transclude="content"></div>
</div>
and here's an example in the component:
export const panelComponentOptions: angular.IComponentOptions = {
transclude: {
'menu': '?panelMenu',
'form': '?panelForm',
'content': '?panelContent',
},
templateUrl: "panel.html",
controller: PanelController,
bindings: {
title: "@?"
}
}
However, the type of the transclude property in angular.IComponentOptions is boolean, which results in compatibility issues.
Hence, my query pertains to why multislot transclusion isn't supported in a component like it is for a directive, and what alternative solutions would you suggest?
Must I create separate components for the menu and form instead? For example:
<panel>
<panel-menu></panel-menu>
<panel-form></panel-form>
<div>
My content
</div>
</panel>