Use ng-transclude more than once in same component

Question

I'm building a container, which has a header and a content. I can toggle the container by clicking on the header and show my content stuff. In my header there are also some informations, that are visible in every toggle state. It looks like this:

closed (just header stuff):

opened (header and content stuff):

I used angular component to build this:

myContainer.ts:

/** @ngInject */
export class MyContainer extends Controller {
    static componentName = 'myContainer';
    static templateUrl = 'app/comp/components/myContainer/myContainer.html';

    static componentOptions: ng.IComponentOptions = {
        transclude: true,
        bindings: {
            headerTitle: '@'
        }
    };

    headerTitle: string;
    isShownBlock: boolean = false;

    constructor(

    ) {
        super();
    }
}

myContainer.html:

<div class="containerHeader" ng-click="ctrl.isShownBlock = !ctrl.isShownBlock">
    <my-icon icon="arrow-filled"></my-icon>
    <div class="containerTitle">{{ctrl.headerTitle}}</div>
</div>
<div class="containerContent" ng-if="ctrl.isShownBlock">
    <div class="containerInnerContent" ng-transclude>
        <!--TRANSCLUDED_CONTENT-->
    </div>
</div>

Using myContainer in my code:

<my-container header-title="my container">
    transcluded things
</my-container>

As you can see, I'm using a binding to set my container title and transclude my content stuff with ng-transclude. Now I would like to set my container title also with an ng-transclude. My problem is, that I don't know how to distinguish the transcluded stuff for my title and my content? I tried to build an own component for the header and put it within the <my-container></my-container> stuff and also use ng-transclude but I didn't get the final solution. I hope it's clear enough, any ideas?

score 1 · Answer 1 · answered Jan 24 '17 at 10:12

I found a solution on this page: https://blog.thoughtram.io/angular/2015/11/16/multiple-transclusion-and-named-slots.html

I can use multiple ng-transclude-slots. I just have to change the transclude: true to an object. In this object I can put my slots where they come from. I also can remove now my binding for my header title. So basicly it looks like this:

myContainer.ts: I've changed the transclude: true to an object with two slots for my header and my content. I also can remove now my binding, because it isn't needed anymore.

/** @ngInject */
export class MyContainer extends Controller {
    static componentName = 'myContainer';
    static templateUrl = 'app/comp/components/myContainer/myContainer.html';

    static componentOptions: any = {
        transclude: {
            headerSlot: 'headerTitle',
            contentSlot: 'contentData'
        }
    };

    isShownBlock: boolean = false;

    constructor(

    ) {
        super();
    }
}

myContainer.html: In my template I implemented two div's, where my transclude should be and named it with the name of the slot for title and content, so I can handle where the data should be transcluded.

<div class="containerHeader" ng-click="ctrl.isShownBlock = !ctrl.isShownBlock">
    <my-icon icon="arrow-filled"></my-icon>
    <div class="containerTitle" ng-transclude="headerSlot"></div>
</div>
<div class="containerContent" ng-if="ctrl.isShownBlock">
    <div class="containerInnerContent" ng-transclude="contentSlot"></div>
</div>

Using myContainer in my code: In my component tag, I implemented two tags with the slot-name of my object. The code within would be transcluded.

<my-container>
    <header-title>Title</header-title>
    <content-data>Content</content-data>
</my-container>

Now it works fine. Cheers.

Use ng-transclude more than once in same component

1 Answers1