VUI Multi Select

Simple Multi Select

@Component({
  standalone: true,
  imports: [ReactiveFormsModule, VuiMultiselect],
  template: `
    <form [formGroup]="myForm">
      <ng-vui-multiselect
        formControlName="selectedTech"
        [data]="technologies"
        [MultiSelectSettings]="dropdownSettings"
        [placeholderText]="'Select technologies...'"
        (onFilterChange)="onSearchChange($event)">
      </ng-vui-multiselect>
    </form>
  `
})
export class MyComponent {
  myForm = this.fb.group({
    selectedTech: [[]]
  });

  technologies = [
    { id: 1, name: 'Angular' },
    { id: 2, name: 'React' },
    { id: 3, name: 'Vue.js' },
    { id: 4, name: 'Svelte' }
  ];

  dropdownSettings: MultiSelectSettings = {
    singleSelection: false,
    idField: 'id',
    textField: 'name',
    selectAllText: 'Select All',
    unSelectAllText: 'Clear All',
    allowSearchFilter: true,
    closeDropDownOnSelection: false
  };

  constructor(private fb: FormBuilder) {}

  onSearchChange(searchText: string): void {
    // Handle search/filter logic
  }
}

Remote Data Search

export class RemoteSearchComponent {
  cities$ = new BehaviorSubject<any[]>([]);
  searchTerm$ = new Subject<string>();

  remoteSettings: MultiSelectSettings = {
    singleSelection: false,
    idField: 'id',
    textField: 'name',
    allowSearchFilter: true,
    allowRemoteDataSearch: true,
    closeDropDownOnSelection: false,
    searchPlaceholderText: 'Search cities...',
    noDataAvailablePlaceholderText: 'No cities found'
  };

  ngOnInit(): void {
    // Debounced search with remote API
    this.searchTerm$.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap(term => this.searchCities(term))
    ).subscribe(cities => {
      this.cities$.next(cities);
    });
  }

  onSearchChange(searchText: string): void {
    this.searchTerm$.next(searchText);
  }

  private searchCities(term: string): Observable<any[]> {
    return this.httpClient.get<any[]>(`/api/cities?search=${term}`);
  }
}

Custom Styling & Validation

export class StyledMultiSelectComponent {
  form = this.fb.group({
    requiredField: [[], Validators.required],
    limitedField: [[], [this.maxSelectionValidator(3)]]
  });

  customSettings: MultiSelectSettings = {
    singleSelection: false,
    idField: 'value',
    textField: 'label',
    selectAllText: '✓ Select All Items',
    unSelectAllText: '✗ Clear Selection',
    allowSearchFilter: true,
    searchPlaceholderText: '🔍 Type to search...',
    
    // Limit selections
    limitSelection: 3,
    
    // Custom display
    primaryKey: 'value',
    labelKey: 'label',
    
    // Behavior
    enableCheckAll: true,
    showSelectedItemsAtTop: true,
    groupByKey: 'category',
    
    // Appearance
    itemsShowLimit: 2,
    allowRemoteDataSearch: false,
    closeDropDownOnSelection: false,
    disabled: false,
    
    // Badge styling
    badgeShowLimit: 5,
    classes: 'custom-dropdown-class'
  };

  // Custom validator for maximum selections
  maxSelectionValidator(max: number): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      if (control.value && control.value.length > max) {
        return { maxSelection: { max, actual: control.value.length } };
      }
      return null;
    };
  }

  // Get error message for display
  getErrorMessage(fieldName: string): string {
    const field = this.form.get(fieldName);
    if (field?.errors?.['required']) {
      return 'This field is required';
    }
    if (field?.errors?.['maxSelection']) {
      const error = field.errors['maxSelection'];
      return `Maximum ${error.max} selections allowed`;
    }
    return '';
  }
}