my-test123/app/components/labels/labels.component.html

A planner front-end for Fabric8.

<div class="label-wrapper">
  <span *ngFor="let label of _labels | slice:0:truncateAfter;" class="label"
    [ngStyle]="{
      'background-color': label?.attributes['background-color'],
      'color': label.attributes['text-color']
    }"
    (click)="clickLabel(label, $event)">
    <span class="label-name pointer">
        {{label.attributes?.name}}
    </span>
    <span class="close-icon-wrapper padding-left-5" *ngIf="allowDelete">
      <i class="pficon-close pointer" (click)="removeLabel(label, $event)"></i>
    </span>
  </span>
  <span *ngIf="truncateAfter!==undefined && _labels.length > 4" dropdown class="label dropdown" placement="right">
    <span dropdownToggle (click)="moreClick($event)" class="dib dropdown-toggle pointer">
        {{ _labels.length - truncateAfter }}+
      </span>
      <ul *dropdownMenu class="dropdown-menu label-dropdown dropdown-menu-right">
        <li *ngFor="let label of _labels | slice:truncateAfter;">
          <span class="label" [ngStyle]="{
              'background-color': label?.attributes['background-color'],
              'color': label.attributes['text-color']
            }"
            (click)="clickLabel(label, $event)">
            <span class="label-name pointer">
                {{label.attributes?.name}}
            </span>
            <span class="close-icon-wrapper" *ngIf="allowDelete">
              <i class="pficon-close pointer" (click)="removeLabel(label, $event)"></i>
            </span>
          </span>
        </li>
      </ul>
  </span>
</div>