evt-angular-ovi/src/app/components/lems-select/lems-select.component.html

<ng-container *ngIf="lemsTypes.length > 0">
    <ng-select
        [items]="lemsTypes" 
        [multiple]="true" 
        [closeOnSelect]="false" 
        [searchable]="false"
        [placeholder]="'selectLemsItems' | translate" 
        [(ngModel)]="selectedLemTypes" 
        [disabled]="lemsTypes.length === 0" 
        groupBy="group"
        (change)="updateSelectedLemTypes($event)">
        <ng-template ng-header-tmp>
            <div class="lems-select-toolbar">
                <div class="w-100 text-dark select-all-btn">
                    <input id="select-all" type="checkbox" class="mr-2" (click)="toggleLemSelection()"
                        [checked]="selectedLemTypes?.length === lemsTypes.length"/>
                    <label for="select-all" class="m-0">{{ 'selectLemsAll' | translate }}</label>
                </div>
            </div>
        </ng-template>
        <ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
            <ng-container *ngIf="items.length === 1">
                <div class="ng-value" *ngFor="let item of items | slice:0:1">
                    <evt-icon [iconInfo]="iconColor" [style.color]="item.color"></evt-icon>
                    <span class="ng-value-label">{{item.label}}</span>
                    <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
                </div>
            </ng-container>
            <div class="ng-value" *ngIf="items.length > 1">
                <span class="ng-value-label">{{items.length}} {{'selected' | translate}}</span>
            </div>
        </ng-template>
    </ng-select>  
</ng-container>