matrix-dimension/web/app/configs/widget/config-screen/config-screen.widget.component.html

<div *ngIf="widgetComponent.isLoading">
    <my-spinner></my-spinner>
</div>
<div *ngIf="!widgetComponent.isLoading">
    <my-ibox [isCollapsible]="true" [defaultCollapsed]="!!widgetComponent.defaultExpandedWidgetId">
        <h5 class="my-ibox-title">
            <i class="far fa-plus-square"></i>  {{ widgetComponent.defaultName | translate }} {{'Add' | translate}}
        </h5>
        <div class="my-ibox-content">
            <form (submit)="widgetComponent.addWidget()" novalidate name="addForm">
                <ng-container
                        *ngTemplateOutlet="widgetParamsTemplate;context:{widget:widgetComponent.newWidget}"></ng-container>

                <div style="margin-top: 25px">
                    <button type="submit" class="btn btn-sm btn-success" [disabled]="widgetComponent.isUpdating">
                        <i class="fa fa-plus"></i> {{'Add Widget' | translate}}
                    </button>
                </div>
            </form>
        </div>
    </my-ibox>

    <my-ibox *ngFor="let widget of widgetComponent.widgets trackById" [isCollapsible]="true"
             [defaultCollapsed]="widget.id !== widgetComponent.defaultExpandedWidgetId">
        <h5 class="my-ibox-title">
            <i class="fa fa-pencil-alt"></i> {{ widget.name || widget.url || widgetComponent.defaultName }}
            <span *ngIf="widget.data.title">- {{ widget.data.title }}</span>
        </h5>
        <div class="my-ibox-content">
            <form (submit)="widgetComponent.saveWidget(widget)" novalidate name="editForm">
                <ng-container *ngTemplateOutlet="widgetParamsTemplate;context:{widget:widget}"></ng-container>

                <div style="margin-top: 25px">
                    <button type="submit" class="btn btn-sm btn-primary" [disabled]="widgetComponent.isUpdating">
                        <i class="far fa-save"></i>{{'Save Widget' | translate}}
                    </button>
                    <button type="button" class="btn btn-sm ml-1 btn-outline-danger" [disabled]="widgetComponent.isUpdating"
                            (click)="widgetComponent.removeWidget(widget)">
                        <i class="far fa-trash-alt"></i>{{'Remove Widget' | translate}}
                    </button>
                </div>
            </form>
        </div>
    </my-ibox>
</div>