@angular/material/autocomplete#MatAutocompleteSelectedEvent TypeScript Examples

onSelected({ option: { value } }: MatAutocompleteSelectedEvent): void {
    let selectedValue = value;
    if (this.multiple) {
      if (!this.selectedRecords.some((item) => item.value === value.value)) {
        this.selectedRecords.push(value);
      }
      selectedValue = this.selectedRecords;
    } else {
      this.record = value;
    }
    this.updateValue.emit({ [this.name]: selectedValue });
  }

handleSelection(event: MatAutocompleteSelectedEvent) {
    this.cancelEnter = true
    this.itemSelected.emit(event.option.value)
    if (this.clearOnSelection) {
      this.lastInputValue$.pipe(first()).subscribe((any) => {
        this.inputRef.nativeElement.value = any
      })
    }
  }

onFilmAutocompleteSelected(event: MatAutocompleteSelectedEvent) {
    console.log(this.filmMakersControl.value);
    if (typeof this.filmMakersControl.value !== 'string' || this.filmMakersControl.value === "") {
      const selectedFilm: FilmAutocomplete = event.option.value;
      this.filmMakersControl.setValue(selectedFilm.make);
    }
  }

/**
   * input element change handler.
   * normalize the different kind of events, handle the datatypes, set the value and emit the change
   */
  change(event: any) {

    let eventTarget: any;

    if (event instanceof MatSelectChange) {
      event = event.value;
    } else if (event instanceof MatDatepickerInputEvent) {
      event = this.serializeDate(event.value, this.schema.dateFormat, this.schema.type);
    } else if (event instanceof MatAutocompleteSelectedEvent) {
      event = event.option.value;
    } else if (event instanceof MatCheckboxChange) {
      event = event.checked;
    } else {
      // save the event target in case the parsing changes the value
      // (e.g. integer input 5.3 becomes 5, this is reflected on the UI via this handle)
      eventTarget = event.target;
      event = event.target.value;
    }

    if (event === '') {
      event = null;
    }

    if (event == null) {
      this.value = null;
    }

    if (this.schema.type === 'number') {
      this.value = parseFloat(event);
    } else if (this.schema.type === 'integer') {
      this.value = parseInt(event, 10);
    } else if (this.schema.type === 'boolean') {
      if (typeof event === 'string') {
        if (event === 'true') {
          this.value = true;
        } else if (event === 'false') {
          this.value = false;
        } else {
          this.value = null;
        }
      } else {
        this.value = event;
      }
    } else if (this.schema.type === 'string') {
      this.value = event;
    } else if (this.schema.type === 'array') {
      this.value = event;
    } else {
      throw new Error('unknown type: ' + this.schema.type);
    }

    this.emit(this.value);
  }

selectionSubject = new ReplaySubject<MatAutocompleteSelectedEvent>(1)

addBonus(event: MatAutocompleteSelectedEvent) {
    this.query = { ...this.query, bonus: [...this.query.bonus, event.option.value] }
    this.bonusControl.setValue('')
    this.onBonusChange()
    this.onQueryChange()
  }

selectedTag(event: MatAutocompleteSelectedEvent): void {
    if (this.workflow.tags === undefined) { this.workflow.tags = []; }
    this.workflow.tags.push({value: event.option.viewValue});
    this.tagInput.nativeElement.value = '';
    this.tagCtrl.setValue(null);
  }

selectedRole(event: MatAutocompleteSelectedEvent): void {
    if (this.workflow.roles === undefined) { this.workflow.roles = []; }
    this.workflow.roles.push({value: event.option.viewValue});
    this.roleInput.nativeElement.value = '';
    this.roleCtrl.setValue(null);
  }

selected(event: MatAutocompleteSelectedEvent): void {
    this.fruits.push(event.option.viewValue);
    this.fruitInput.nativeElement.value = '';
    this.fruitCtrl.setValue(null);
  }