dashboard.component.html

<div class="dashboard-container" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="tiles">
    <div class="tile" [class.empty_tile_edit]="tile.id === null && tile.editMode" [class.empty_tile]="tile.id === null"
        *ngFor="let tile of tiles;let i=index" (mouseenter)="enterTile(tile, i)" dnd-sortable [sortableIndex]="i">
        <div class="tool-left" *ngIf="tile.id !== null && tile.editMode">
            <span dnd-sortable-handle style="cursor: move;">
                <mat-icon color="primary" class="fa fa-arrows-alt"></mat-icon>
            </span>
        </div>
        <div class="tool" *ngIf="tile.id !== null && tile.editMode">
            <button color="primary" mat-button mat-icon-button [matMenuTriggerFor]="toolMenu">
                <mat-icon class="fa fa-ellipsis-v"></mat-icon>
            </button>
            <mat-menu #toolMenu="matMenu">
                <ng-container  *ngFor="let menu of tile.menus">
                    <button *ngIf="menu!=='view'" mat-menu-item>{{menu}}</button>
                    <button *ngIf="menu==='view'" mat-menu-item [matMenuTriggerFor]="toolMenuView">{{menu}}</button>
                </ng-container>
            </mat-menu>
            <mat-menu #toolMenuView="matMenu">
                <button mat-menu-item *ngFor="let view of tile.views" [disabled]="tile.view === view" (click)="tile.view = view">
                    <mat-icon class="fa fa-list" color="primary" style="height: auto;width: auto;"></mat-icon>
                    <span>{{view}}</span>
                </button>
            </mat-menu>
        </div>
        <app-tile-last-mails-view *ngIf="tile.type === 'lastViewMails'" [view]="tile.view"
            style="display: flex;height: 100%;flex-direction: column;width: 100%;">
        </app-tile-last-mails-view>
        <button mat-button color="secondary" mat-icon-button *ngIf="tile.id === null && tile.editMode">
            <mat-icon color="secondary" class="fa fa-plus"></mat-icon>
        </button>
    </div>
</div>