MultiSelect

<flx-multiselect
  label="Top 3 priorities"
  placeholder="Select up to 3 priorities"
  [(ngModel)]="priorities"
  [options]="priorityOptions"
  [maxSelections]="3">
</flx-multiselect>

<!-- Chips mode (default) -->
<flx-multiselect
  label="Tags"
  [(ngModel)]="tags"
  [options]="tagOptions"
  displayMode="chips">
</flx-multiselect>

<!-- Count mode -->
<flx-multiselect
  label="Categories"
  [(ngModel)]="categories"
  [options]="categoryOptions"
  displayMode="count">
</flx-multiselect>

<!-- Text mode -->
<flx-multiselect
  label="Locations"
  [(ngModel)]="locations"
  [options]="locationOptions"
  displayMode="text">
</flx-multiselect>

<flx-multiselect
  label="Permissions"
  placeholder="Select permissions"
  [(ngModel)]="permissions"
  [options]="permissionOptions"
  [selectAll]="true">
</flx-multiselect>

export class PermissionsForm {
  permissions: string[] = [];
  permissionOptions = [
    { value: 'read', label: 'Read' },
    { value: 'write', label: 'Write' },
    { value: 'delete', label: 'Delete' },
    { value: 'admin', label: 'Admin' }
  ];
}

<form [formGroup]="filterForm">
  <flx-multiselect
    label="Filters"
    formControlName="categories"
    [options]="categoryOptions"
    [error]="categoriesControl.invalid && categoriesControl.touched">
  </flx-multiselect>
</form>

import { FormBuilder, Validators } from '@angular/forms';

export class FilterForm {
  filterForm = this.fb.group({
    categories: [[], [Validators.required, Validators.minLength(1)]]
  });

  categoryOptions = [
    { value: 'tech', label: 'Technology' },
    { value: 'business', label: 'Business' },
    { value: 'design', label: 'Design' },
    { value: 'marketing', label: 'Marketing' }
  ];

  get categoriesControl() { return this.filterForm.get('categories')!; }

  constructor(private fb: FormBuilder) {}
}

<flx-multiselect
  label="Team members"
  placeholder="Search and select members"
  [(ngModel)]="selectedMembers"
  [options]="members"
  [loading]="isLoading"
  [searchable]="true"
  (search)="searchMembers($event)">
</flx-multiselect>

import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

export class TeamSelect implements OnInit {
  selectedMembers: string[] = [];
  members: SelectOption[] = [];
  isLoading = false;
  private searchSubject = new Subject<string>();

  ngOnInit() {
    this.searchSubject.pipe(debounceTime(300)).subscribe(query => {
      this.loadMembers(query);
    });
    this.loadMembers('');
  }

  searchMembers(query: string) {
    this.searchSubject.next(query);
  }

  async loadMembers(query: string) {
    this.isLoading = true;
    const results = await this.teamService.searchMembers(query);
    this.members = results.map(m => ({
      value: m.id,
      label: m.name
    }));
    this.isLoading = false;
  }
}