multiselect.component.ts

export class MultiselectComponent implements ControlValueAccessor {
  [...]

  open = false;
  disabled = false;

  [...]

  writeValue(items: Array<ListItem>): void {
    this.selectedItems = items || [];
    this.onChange(this.selectedItems);
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouch = fn;
  }

  setDisabledState?(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  onItemClick(item: ListItem) {
    if (!this.disabled) {
      const found = this.isItemAlreadySelected(item);
      if (!found) {
        this.select(item);
      } else {
        this.unselect(item);
      }
      this.onChange(this.items);
    }
  }

  [...]

  toggleDropdown() {
    if (!this.disabled) {
      this.open = !this.open;
    }
  }

  closeDropdown() {
    this.open = false;
  }

  [...]

}