dashboard-tile-right-tile.component.html

<div class="right-tile" #items>
  <div class="dashboard-items" [ngClass]="{'dashboard-empty': itemData.length === 0}" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)">
    <ng-container *ngFor="let item of itemData;let even=even">
      <ng-container *planetAuthorizedRoles="item.authorization || '_any'">
        <div
          class="dashboard-item"
          [ngClass]="{'bg-grey': even, 'cursor-pointer': item.link}"
          [routerLink]="item.link"
          [matTooltip]="item.tooltip"
          cdkDrag
          [cdkDragDisabled]="cardTitle==='myLife'"
          #dashboardTile
        >
          <p [matBadge]="item.badge" [matBadgeHidden]="item.badge===0" matBadgeOverlap="false">{{item.firstLine}}</p>
          <p class="dashboard-text" [ngStyle]="{ '-webkit-line-clamp': tileLines }">{{item.title}}</p>
          <button mat-icon-button class="delete-item" (click)="removeFromShelf($event, item)" *ngIf="cardTitle!=='myLife' && !item?.canRemove">
            <mat-icon i18n-matTooltip [matTooltip]="'Remove from ' + cardTitle" [inline]="true">clear</mat-icon>
          </button>
        </div>
      </ng-container>
    </ng-container>
    <span *ngIf="itemData.length === 0" class="dashboard-item cursor-pointer" [routerLink]="[emptyLink]" i18n>
      Add item to {{cardTitle}}
    </span>
  </div>
</div>