Clarity stack-view does not work with Angular ngTemplateOutlet

Question

I have to display key-value pairs with Clarity's stack-view in the same component multiple times. To avoid code duplication I would like to use ng-template and ngTemplateOutlet.

Unfortunately the outer clr-stack-block is only expandable if it contains an additional clr-stack-block element with static content besides the ngTemplateOutlet.

Please have a look here: https://stackblitz.com/edit/clarity-angular-7-2ue7wd

The app.component.html contains my sample code and showcases that the outer clr-stack-block is only expandable if it contains an additional static element.

<ng-template #propertyList let-obj="obj" let-props="props">
    <clr-stack-block *ngFor="let prop of props">
        <clr-stack-label>{{prop}}</clr-stack-label>
        <clr-stack-content>{{ !obj[prop] ? '-' : obj[prop] }}</clr-stack-content>
    </clr-stack-block>
</ng-template>

<clr-stack-view>
    <clr-stack-block [clrSbExpanded]="true">
        <clr-stack-label>not expandable - but why?</clr-stack-label>

        <!-- don't use a 'ng-container' here as it will break the stack view -->
        <clr-stack-block
            *ngTemplateOutlet="propertyList; context: {obj: {name: 'John Doe', birthdate: '01. Jan 1970'}, props: ['name', 'birthdate']}">
        </clr-stack-block>
    </clr-stack-block>
    <clr-stack-block [clrSbExpanded]="true">
        <clr-stack-label>expandable - because of additional static block element?</clr-stack-label>

        <clr-stack-block
            *ngTemplateOutlet="propertyList; context: {obj: {name: 'Test User', birthdate: '10. Feb 2000'}, props: ['name', 'birthdate']}">
        </clr-stack-block>

        <clr-stack-block>
            <clr-stack-label><i>static</i></clr-stack-label>
            <clr-stack-content><i>clr-stack-block</i></clr-stack-content>
        </clr-stack-block>
    </clr-stack-block>
</clr-stack-view>

I can't figure out what I'm missing here.

Thank you for your advice!

Answer 1

The stackview tries to auto-detect if there are stackblock children, but if it fails to do so you can use the [clrSbExpandable] input to explicitly specify if or when expandable behavior should be enabled.

Hope this helps!