@angular/material/autocomplete#MatAutocompleteSelectedEvent TypeScript Examples

The following examples show how to use @angular/material/autocomplete#MatAutocompleteSelectedEvent. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: queryable-input.component.ts    From Smersh with MIT License 6 votes vote down vote up
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 });
  }
Example #2
Source File: autocomplete.component.ts    From geonetwork-ui with GNU General Public License v2.0 6 votes vote down vote up
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
      })
    }
  }
Example #3
Source File: app.component.ts    From RoboScan with GNU General Public License v3.0 5 votes vote down vote up
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);
    }
  }
Example #4
Source File: json-schema-form.component.ts    From json-schema-form with Apache License 2.0 5 votes vote down vote up
/**
   * 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);
  }
Example #5
Source File: autocomplete.component.ts    From geonetwork-ui with GNU General Public License v2.0 5 votes vote down vote up
selectionSubject = new ReplaySubject<MatAutocompleteSelectedEvent>(1)
Example #6
Source File: search.component.ts    From wingsearch with GNU General Public License v3.0 5 votes vote down vote up
addBonus(event: MatAutocompleteSelectedEvent) {
    this.query = { ...this.query, bonus: [...this.query.bonus, event.option.value] }
    this.bonusControl.setValue('')
    this.onBonusChange()
    this.onQueryChange()
  }
Example #7
Source File: edit-workflow.component.ts    From workflow-editor with Educational Community License v2.0 5 votes vote down vote up
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);
  }
Example #8
Source File: edit-workflow.component.ts    From workflow-editor with Educational Community License v2.0 5 votes vote down vote up
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);
  }
Example #9
Source File: autocomplete-chip.component.ts    From matx-angular with MIT License 5 votes vote down vote up
selected(event: MatAutocompleteSelectedEvent): void {
    this.fruits.push(event.option.viewValue);
    this.fruitInput.nativeElement.value = '';
    this.fruitCtrl.setValue(null);
  }