# UIB MultiselectModule

## Prequisites

Add the `MultiselectModule` to your module imports:

```TS
import { MultiselectModule } from '@uib/angular/components/multiselect';

@NgModule({
  imports: [
    // ...
    MultiselectModule,
    // ...
  ],
})
// ...
```

## UibMultiselect

### Examples

Basic multiselect using uib-data-list

```HTML
<uib-multiselect [valueContent]="valueTemplate" [disabled]="disabled" [(ngModel)]="value" [placeholder]="placeholder">
  <uib-data-list *uibDataList>
    <button uibOption [value]="null">
      None
    </button>
    <button uibOption [value]="item" [disabled]="item.disabled" *ngFor="let item of items">
      {{ item.country }}
    </button>
  </uib-data-list>
</uib-multiselect>

<ng-template #valueTemplate let-items>
  <ng-template [ngIf]="items.length > 1" [ngIfElse]="renderTpl">
    {{ items.length }} countries selected
  </ng-template>
  <ng-template #renderTpl>
    <ng-container *ngFor="let item of items">
      {{ item.country }}
    </ng-container>
  </ng-template>
</ng-template>
```

Basic multiselect using uib-data-list-wrapper

```HTML
<uib-multiselect [valueContent]="valueTemplate" [disabled]="disabled" [(ngModel)]="value" [placeholder]="placeholder">
  <uib-data-list-wrapper [itemContent]="valueTemplate" [items]="items" *uibDataList>
    <button uibOption [value]="null">
      None
    </button>
  </uib-data-list-wrapper>
</uib-multiselect>

<ng-template #valueTemplate let-item>
  {{ item.country }}
</ng-template>
```