How to use multiple slot transclution in angular 1.5 component, or what to use instead?

Question

I'm building a panel component in angular 1.5 and want to transclude some markup into this template (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 then something like this in the component:

    export const panelComponentOptions: angular.IComponentOptions = {
        transclude: {
          'menu': '?panelMenu',
          'form': '?panelForm',
          'content': '?panelContent',
        },
        templateUrl: "panel.html",
        controller: PanelController,
        bindings: {
            title: "@?"
        }
    }

But the transclude property of the angular.IComponentOptions is of type boolean, so this won't work.

Som my question is why can't you use multislot transclusion in a component, when you can do it with a directive, and what would you recommend me to do instead?

Do I really need to make separate components of the menu and form? Like this:

<panel>
    <panel-menu></panel-menu>
    <panel-form></panel-form>
    <div>
        My content
    </div>
</panel>

Answer 1

I think this StackOverflow post kind of sums up the reasons why you'd probably want to use a directive here instead of a component anyhow. You can certainly make sub-components for your panel, but the Angular component just doesn't have the advanced options a directive has. (See also: Angular component)