first-npm-package-nicule/material-inputs/components/options/multi-select-field.component.html

This isi first npm package

<label [for]="'form-field-' + field.name + '-' + uniqueIdentifier">{{label | translate}}<ng-container *ngIf="field.required">*</ng-container></label>
<mat-form-field floatLabel="never">
    <mat-select multiple
                [id]="'form-field-' + field.name + '-' + uniqueIdentifier"
                [placeholder]="placeholder"
                [name]="field.name"
                [required]="field.required"
                [disabled]="field.isDisabled || disabled"
                [ngModel]="field.value"
                [matTooltip]="tooltip"
                [errorStateMatcher]="matcher">
        <mat-option *ngFor="let option of options"
                [disabled]="option.isDisabled"
                [value]="option.value">
            <ng-container *ngIf="settings.preventOptionTranslation; else translated">{{ option.name }}</ng-container>
            <ng-template #translated>{{ option.name | translate }}</ng-template>
        </mat-option>
    </mat-select>
    <mat-error>
        <div *ngFor="let error of errors">
            {{error.message | translate: error.payload }}
        </div>
    </mat-error>
    <span class="empty-placeholder" *ngIf="(field.isDisabled || disabled) && ngModel.control.value?.length === 0">-</span>
    <span class="empty-placeholder" *ngIf="(field.isDisabled || disabled) && ngModel.control.value?.length > 0">
            <ng-container *ngIf="settings.preventOptionTranslation; else translated">{{ ngModel.control.value }}
                <ng-container *ngFor="let val of ngModel.control.value; let lastItem = last">
                    {{ val }}<ng-container *ngIf="!lastItem">,&nbsp;</ng-container>
                </ng-container>
            </ng-container>
            <ng-template #translated>
                <ng-container *ngFor="let selectedValueKey of selectedValueKeys; let lastItem = last">
                    {{ selectedValueKey | translate }}<ng-container *ngIf="!lastItem">,&nbsp;</ng-container>
                </ng-container>
            </ng-template>
    </span>
</mat-form-field>