Modal editor {{block.title}} {{block.content}} {{child.title}} {{child.content}}

<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>