<ng-container *ngIf="(components$ | async)?.length > 0">
  <div class="main-header-item" *ngFor="let item of components$ | async">
    <ng-container *c8yComponentOutlet="item.component; environmentInjector: item.injector"></ng-container>
  </div>
</ng-container>
<ng-container>
  <div class="main-header-item" *ngIf="(templatesAndLabels$ | async)?.length > 0">
    <div class="dropdown" dropdown>
      <button
        type="button"
        class="main-header-button dropdown-toggle c8y-dropdown"
        dropdownToggle
        aria-haspopup="true"
        title="{{ 'Actions' | translate }}"
      >
        <i [c8yIcon]="'plus-circle'" class="icon-2x"></i>
      </button>

      <ul class="dropdown-menu cog-dropdown" *dropdownMenu>
        <ng-container *ngFor="let item of templatesAndLabels$ | async">
          <ng-container *c8yOutlet="item.template; injector: item.injector"></ng-container>
          <li *ngIf="item.label">
            <button
              title="{{ item.label | translate }}"
              type="button"
              [attr.disabled]="item.disabled ? 'disabled' : null"
              (click)="invoke(item)"
            >
              <i *ngIf="item.icon" [c8yIcon]="item.icon"></i>
              {{ item.label | translate }}
            </button>
          </li>
        </ng-container>
      </ul>
    </div>
  </div>
</ng-container>