]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/app/shared/shared-forms/select/select-checkbox.component.html
Use ng select for multiselect
[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-forms / select / select-checkbox.component.html
CommitLineData
52c4976f
C
1<ng-select
2 [items]="availableItems"
3 [(ngModel)]="selectedItems"
4 (ngModelChange)="onModelChange()"
5 i18n-placeholder placeholder="Add a new language"
6 [clearable]="true"
7 [multiple]="true"
8 [searchable]="true"
9 [closeOnSelect]="false"
10
11 bindValue="id"
12 bindLabel="label"
13
14 notFoundText="No items found" i18n-notFoundText
15
16 [selectableGroup]="selectableGroup"
17 [selectableGroupAsModel]="selectableGroupAsModel"
18
19 groupBy="group"
20 [compareWith]="compareFn"
21
22 [maxSelectedItems]="maxSelectedItems"
23>
24
25 <ng-template ng-optgroup-tmp let-item="item" let-item$="item$" let-index="index">
26 <div class="form-group-checkbox">
27 <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/>
28 <span role="checkbox" [attr.aria-checked]="item$.selected"></span>
29 <span>{{ item.group }}</span>
30 </div>
31 </ng-template>
32
33 <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
34 <div class="form-group-checkbox">
35 <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/>
36 <span role="checkbox" [attr.aria-checked]="item$.selected"></span>
37 <span>{{ item.label }}</span>
38 </div>
39 </ng-template>
40
41</ng-select>