<clr-stack-view>
<clr-stack-header>
Modal editor
<button class="stack-action btn btn-sm btn-link" (click)="editModal = true" type="button">Edit</button>
</clr-stack-header>
<clr-stack-block *ngFor="let block of blocks">
<clr-stack-label>{{block.title}}</clr-stack-label>
<clr-stack-content>{{block.content}}</clr-stack-content>
<clr-stack-block *ngFor="let child of block.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-view>
<clr-modal [(clrModalOpen)]="editModal">
<h3 class="modal-title">Edit mode</h3>
<div class="modal-body">
<clr-stack-view>
<clr-stack-block *ngFor="let block of blocks">
<clr-stack-label>{{block.title}}</clr-stack-label>
<clr-stack-content>
<input type="text" [(ngModel)]="block.content"/>
</clr-stack-content>
<clr-stack-block *ngFor="let child of block.children">
<clr-stack-label>{{child.title}}</clr-stack-label>
<clr-stack-content>
<input type="text" [(ngModel)]="child.content"/>
</clr-stack-content>
</clr-stack-block>
</clr-stack-block>
</clr-stack-view>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="editModal = false">Done</button>
</div>
</clr-modal>