Lazily loaded children
Label 1
Content 1
Loading...
{{child.title}}
{{child.content}}
Label 2
Content 2
<clr-stack-view>
<clr-stack-header>
Lazily loaded children
<button class="stack-action btn btn-sm btn-link" (click)="resetChildren()" type="button">Reset</button>
</clr-stack-header>
<clr-stack-block [clrSbExpandable]="true" (clrSbExpandedChange)="fetchChildren()">
<clr-stack-label>Label 1</clr-stack-label>
<clr-stack-content>Content 1</clr-stack-content>
<clr-stack-block *ngIf="children.length == 0">
<div>Loading...</div>
</clr-stack-block>
<clr-stack-block *ngFor="let child of children">
<clr-stack-label>{{child.title}}</clr-stack-label>
<clr-stack-content>{{child.content}}</clr-stack-content>
</clr-stack-block>
</clr-stack-block>
<clr-stack-block>
<clr-stack-label>Label 2</clr-stack-label>
<clr-stack-content>Content 2</clr-stack-content>
</clr-stack-block>
</clr-stack-view>