50 lines
1.8 KiB
HTML
50 lines
1.8 KiB
HTML
|
|
<div class="chip-list-wrapper">
|
|
<mat-chip-list #chipList>
|
|
<ng-container *ngFor="let select of selectData | slice:0:20; let i =index">
|
|
<mat-chip class="cardinal-colors" (click)="removeChip(select)" style="background-color: #00a79d;">
|
|
{{ select.item }}
|
|
<mat-icon class="mat-chip-remove">cancel</mat-icon>
|
|
</mat-chip>
|
|
</ng-container>
|
|
<mat-chip *ngIf="selectData.length>20" class="cardinal-colors" style="background-color: #00a79d;">... {{selectData.length-20}} weitere
|
|
</mat-chip>
|
|
</mat-chip-list>
|
|
</div>
|
|
|
|
<mat-form-field class="full-width" appearance="fill" (onmouseover)="this.showCheckBox()"(onmouseout)="this.hideCheckBox()">
|
|
<input matInput type="text"
|
|
[placeholder]="placeholder"
|
|
[matAutocomplete]="auto"
|
|
[formControl]="selectControl">
|
|
<mat-checkbox *ngIf="this.showCheckbox == true"
|
|
[checked]="this.allSelected"
|
|
[(indeterminate)]="indeterminate"
|
|
(change)="this.toggleAll()"></mat-checkbox>
|
|
</mat-form-field>
|
|
|
|
|
|
|
|
<!-- <mat-form-field>
|
|
<input type="text"
|
|
[placeholder]="placeholder"
|
|
matInput
|
|
[matAutocomplete]="auto"> -->
|
|
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" color="primary" >
|
|
<cdk-virtual-scroll-viewport
|
|
[ngStyle]="{height: '200px'}"
|
|
itemSize="25">
|
|
<mat-option *cdkVirtualFor="let data of filteredData" color="primary">
|
|
<div (click)="optionClicked($event, data)">
|
|
<mat-checkbox [checked]="data.selected" color="primary"
|
|
(change)="toggleSelection(data)"
|
|
(click)="$event.stopPropagation()">
|
|
{{ data.item }}
|
|
</mat-checkbox>
|
|
</div>
|
|
</mat-option>
|
|
</cdk-virtual-scroll-viewport>
|
|
</mat-autocomplete>
|
|
|
|
<!-- </mat-form-field> -->
|