@angular/material/select#MatSelectChange TypeScript Examples

public async onReleaseChannelChange(evt: MatSelectChange): Promise<void> {
    console.debug(evt);
    // this._electronService.invoke("set-release-channel", channel);

    const descriptionKey =
      evt.source.value === WowUpReleaseChannelType.Beta
        ? "PAGES.OPTIONS.APPLICATION.APP_RELEASE_CHANNEL_CONFIRMATION_DESCRIPTION_BETA"
        : "PAGES.OPTIONS.APPLICATION.APP_RELEASE_CHANNEL_CONFIRMATION_DESCRIPTION_STABLE";

    const dialogRef = this._dialog.open(ConfirmDialogComponent, {
      data: {
        title: this._translateService.instant("PAGES.OPTIONS.APPLICATION.APP_RELEASE_CHANNEL_CONFIRMATION_LABEL"),
        message: this._translateService.instant(descriptionKey),
        positiveKey: "PAGES.OPTIONS.APPLICATION.APP_RELEASE_CHANNEL_CONFIRMATION_POSITIVE_BUTTON",
      },
    });

    try {
      const result = await firstValueFrom(dialogRef.afterClosed());

      if (!result) {
        evt.source.value = await this.wowupService.getWowUpReleaseChannel();
      } else {
        await this.wowupService.setWowUpReleaseChannel(evt.source.value as WowUpReleaseChannelType);
      }

      this.currentReleaseChannel$.next(evt.source.value as WowUpReleaseChannelType);
    } catch (e) {
      console.error(e);
    }
  }

public onCurrentLanguageChange = (evt: MatSelectChange): void => {
    const dialogRef = this._dialog.open(ConfirmDialogComponent, {
      data: {
        title: this._translateService.instant("PAGES.OPTIONS.APPLICATION.SET_LANGUAGE_CONFIRMATION_LABEL"),
        message: this._translateService.instant("PAGES.OPTIONS.APPLICATION.SET_LANGUAGE_CONFIRMATION_DESCRIPTION"),
      },
    });

    dialogRef
      .afterClosed()
      .pipe(
        switchMap((result) => {
          if (!result) {
            evt.source.value = this.currentLanguage$.value;
            return of(undefined);
          }

          return from(this.wowupService.setCurrentLanguage(evt.value as string)).pipe(map(() => evt.value as string));
        }),
        switchMap((result) => {
          this.currentLanguage$.next(result);
          return from(this.electronService.restartApplication());
        }),
        catchError((error) => {
          console.error(error);
          return of(undefined);
        })
      )
      .subscribe();
  };

public apply(filterType: FilterTypes, $event: MatSelectChange): void {
    this.filterService.clearFilters(filterType);

    // Check if event is emitted on select change
    if (Array.isArray($event.value) && $event.value.length === 0) {
      return;
    }

    // If value is emitted when user clicks empty option which is "Not selected"
    // There is no id 0, so we don't send this value
    if (Number($event.value) === 0) {
      return;
    }
    this.showSkeletonChange.emit(true);
    this.filterService.applyFilter(filterType, $event.value);
    this.getState();
  }

public onScaleChange = async (evt: MatSelectChange): Promise<void> => {
    const newScale = evt.value as number;
    await this._zoomService.setZoomFactor(newScale);
    this.currentScale = newScale;
  };

public onDefaultAddonChannelChange(evt: MatSelectChange): void {
    if (!this.installationModel) {
      return;
    }
    this.installationModel.defaultAddonChannelType = evt.value;
  }

public selectionChange(change: MatSelectChange) {
    this.headlessSort.sortBy(change.value);
  }

/**
   * 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);
  }

changePeriod(event: MatSelectChange): void {
        this._timepickerService.period = event.value as NgxMatTimepickerPeriods;
        this._changeTime();
    }