@angular/core#SimpleChanges TypeScript Examples

ngOnChanges(changes: SimpleChanges) {
    if(this.scrollContent && this.config) {
      this.scrollContent.scrollEvents = true;

      let scrollStartFunc = async (ev) => {
        const el = await this.scrollContent.getScrollElement();
        this.contentHeight = el.offsetHeight;
        this.scrollHeight = el.scrollHeight;
        if (this.config.maxValue === undefined) {
          this.config.maxValue = this.element.nativeElement.offsetHeight;
        }
        this.lastScrollPosition = el.scrollTop;
      };

      if(this.scrollContent && this.scrollContent instanceof IonContent) {
        this.scrollContent.ionScrollStart.subscribe(scrollStartFunc);
        this.scrollContent.ionScroll.subscribe(async (ev) => this.adjustElementOnScroll(ev));
        this.scrollContent.ionScrollEnd.subscribe(async (ev) => this.adjustElementOnScroll(ev));

      } else if(this.scrollContent instanceof HTMLElement) {
        (this.scrollContent as HTMLElement).addEventListener('ionScrollStart', scrollStartFunc);
        (this.scrollContent as HTMLElement).addEventListener('ionScroll',async (ev) => this.adjustElementOnScroll(ev));
        (this.scrollContent as HTMLElement).addEventListener('ionScrollEnd',async (ev) => this.adjustElementOnScroll(ev));
      }
    }
  }

ngOnChanges(changes: SimpleChanges)
    {
        if (!this.splide) {
            return;
        }

        if (changes['selectedSlideIndex']) {
            const currentIndex = changes['selectedSlideIndex'].currentValue;
            if (currentIndex !== this.splide.index) {
                this.splide.go(currentIndex);
            }
        }

        if (changes['options']) {
            this.splide.options = changes['options'].currentValue;
        }
    }

ngOnChanges(changes: SimpleChanges) {
    const {currentWindow} = changes;
    if (
      currentWindow &&
      currentWindow.previousValue &&
      currentWindow.currentValue.properties.fullScreen !== currentWindow.previousValue.properties.fullScreen
    ) {
      this.handleChanges(currentWindow.currentValue.properties.fullScreen);
    }
  }

ngOnChanges(changes: SimpleChanges) {
    if (changes.highlightText.firstChange) {
      this.originalHTML = this.el.nativeElement.innerHTML;
      return;
    }
    const { currentValue } = changes.highlightText;
    if (currentValue) {
      const regExp = new RegExp(`(${currentValue})`, 'gi');
      this.el.nativeElement.innerHTML = this.originalHTML.replace(
        regExp,
        `<span style="background-color: ${this.highlightColor}">\$1</span>`
      );
    } else {
      this.el.nativeElement.innerHTML = this.originalHTML;
    }
    console.log(currentValue);
  }

ngOnChanges(changes: SimpleChanges): void {
      if (changes['selectedIndex']) {
          this.validateIndex();
      }

      if (changes['swipe']) {
          this.helperService.manageSwipe(this.swipe, this.elementRef,
          'thumbnails', () => this.moveRight(), () => this.moveLeft());
      }

      if (this.images) {
          this.remainingCountValue = this.images.length - (this.rows * this.columns);
      }
  }

// @TODO: show range
  // @TODO: nicer img look
  // @TODO: show in a max size box, use fit-content to resize things and max-values to keep things sane
  ngOnChanges(changes: SimpleChanges): void {
    console.log('changes!');
    if (this.textMode) {
      this.textEvents = this.events.map((event) => this.toStringEvent(event));
    } else {
      this.toImgEvents(this.events);
    }
  }

public ngOnChanges(changes: SimpleChanges): void {
    if (changes.clientType) {
      if (this.addon.latestAddonChannel !== this.channel) {
        this._latestChannelType = this.addon.latestAddonChannel;
      } else {
        this._latestChannelType = this._getAddonListItemFileProp.transform(
          this.addon,
          "channelType",
          this.channel
        ) as AddonChannelType;
      }

      this._requiredDependencies = this.getRequiredDependencies();
    }
  }

ngOnChanges(changes: SimpleChanges): void {
    if (changes.data && !changes.data.isFirstChange()) {
      this.echartsInstance.setOption({
        series: [
          {
            data: this.data.map(v => this.maxValue),
          },
          {
            data: this.data,
          },
          {
            data: this.data,
          },
        ],
      });
    }
  }

ngOnChanges(changes: SimpleChanges): void {
    const { visible } = changes;
    if (visible) {
      const value = visible.currentValue;
      if (value) {
        this.open();
      } else {
        this.dispose();
      }
    }
  }

ngOnChanges(changes: SimpleChanges): void {
    if (changes.direction && !changes.direction.firstChange) {
      this.direction = changes.direction.currentValue;
      this.adjustLayout();
    }

    if (changes.color && !changes.color.firstChange) {
      this.color = changes.color.currentValue;
    }

    if (changes.fabButtons && !changes.fabButtons.firstChange) {
      this.fabButtons = changes.fabButtons.currentValue;
    }
  }

ngOnChanges(changes: SimpleChanges): void {
        this.onChangesUpdateSettings(changes);
        this.onChangesInputImage(changes);

        if (this.loadedImage?.original.image.complete && (changes.containWithinAspectRatio || changes.canvasRotation)) {
            this.loadImageService
                .transformLoadedImage(this.loadedImage, this.settings)
                .then((res) => this.setLoadedImage(res))
                .catch((err) => this.loadImageError(err));
        }
        if (changes.cropper || changes.maintainAspectRatio || changes.aspectRatio) {
            this.setMaxSize();
            this.setCropperScaledMinSize();
            this.setCropperScaledMaxSize();
            if (this.maintainAspectRatio && (changes.maintainAspectRatio || changes.aspectRatio)) {
                this.resetCropperPosition();
            } else if (changes.cropper) {
                this.checkCropperPosition(false);
                this.doAutoCrop();
            }
            this.cd.markForCheck();
        }
        if (changes.transform) {
            this.transform = this.transform || {};
            this.setCssTransform();
            this.doAutoCrop();
        }
    }

ngOnChanges(changes: SimpleChanges) {
    if (
      this.countries &&
      changes.defaulyCountryisoCode &&
      changes.defaulyCountryisoCode.currentValue !==
        changes.defaulyCountryisoCode.previousValue
    ) {
      this.setCountry(changes.defaulyCountryisoCode.currentValue);
    }
  }

ngOnChanges(changes: SimpleChanges) {
    if(changes.directories) {
      this.directories = changes.directories.currentValue;
      this._updateData();
    }

    if(changes.showProgress) { this.showProgress = changes.showProgress.currentValue; }
    if(changes.allowSetPriority) { this.allowSetPriority = changes.allowSetPriority.currentValue }
  }

ngOnChanges(changes: SimpleChanges): void {
        if (changes.variant) {
            this._resizeOnModeChange();
        }
        this.useDefaultCollapsedHeight = isNaN(this.collapsedHeight) || this.collapsedHeight === 0;
        this.expandedHeight = Number(this.expandedHeight);
        this.collapsedHeight = Number(this.collapsedHeight);

        if (changes.scrollContainerClassName || changes.scrollContainerId || changes.scrollContainerElement) {
            this._listenForScrollEvents();
        }

        this._ref.detectChanges();
    }

ngOnChanges(changes: SimpleChanges) {
    // ngOnChanges fires when the component mounts but before the view
    // is initialized, so we need to bail when this fires for the first
    // time.
    if (!this.streamEl) {
      return;
    }
    // convert SimpleChanges into a Record that has currentValues to be
    // synced onto streamEl
    this.syncProperties(
      Object.keys(changes).reduce(
        (acc, key) => ({
          ...acc,
          [key]: changes[key].currentValue,
        }),
        {}
      )
    );
  }

ngOnChanges(change: SimpleChanges) {
    try {
      if (change[enums.CONVERSATION_DETAILS]) {
        if (
          change[enums.CONVERSATION_DETAILS].currentValue !==
          change[enums.CONVERSATION_DETAILS].previousValue
        ) {
          this.getLastMessage(change[enums.CONVERSATION_DETAILS].currentValue);
          this.getLastMessageTimestamp(
            change[enums.CONVERSATION_DETAILS].currentValue
          );
          this.getName(change[enums.CONVERSATION_DETAILS].currentValue);
        }
      }
    } catch (error) {
      logger(error);
    }
  }

/**
   * if the schema changes from the outside,
   * reset the component state wrt. errors and the choices cache
   */
  ngOnChanges(changes: SimpleChanges): void {
    if (changes.value && !changes.value.isFirstChange() && this.getLayout() === 'autocomplete') {
      // make sure autocomplete form control picks up external changes
      this.control.setValue(changes.value.currentValue);
    }

    if (changes.schema) {
      if (changes.schema.previousValue) {
        this.rootSchema = null;
        if (this.widgetHost.viewContainerRef) {
          this.widgetHost.viewContainerRef.clear();
        }
        this.ngOnInit();
      }
    }

    if (changes.switch && !changes.switch.isFirstChange()) {
      if (this.getLayout() === 'custom') {
        this.loadComponent();
      } else {
        if (this.widgetHost.viewContainerRef) {
          this.widgetHost.viewContainerRef.clear();
        }
      }
    }
  }

public ngOnChanges(changes: SimpleChanges): void {
    const inputs = Object.keys(changes).reduce((result, item) => {
      result[item] = changes[item].currentValue;
      return result;
    }, {});

    this.defaultInputs.next({ ...this.defaultInputs.getValue(), ...inputs });
    this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
  }

ngOnChanges(changes: SimpleChanges) {
    if (
      this.fg &&
      changes.txnDt &&
      changes.txnDt.previousValue &&
      changes.txnDt.currentValue &&
      !isEqual(changes.txnDt.previousValue, changes.txnDt.currentValue)
    ) {
      from(this.currencyService.getExchangeRate(this.fg.value.currency, this.homeCurrency, this.txnDt || new Date()))
        .pipe()
        .subscribe((newExchangeRate) => {
          this.exchangeRate = newExchangeRate;
          if (this.innerValue.orig_amount && this.innerValue.orig_currency !== this.homeCurrency) {
            this.innerValue.amount = this.innerValue.orig_amount * this.exchangeRate;
            this.fg.value.amount = this.innerValue.orig_amount;
            this.fg.value.homeCurrencyAmount = this.innerValue.amount;
          }
        });
    }
  }

ngOnChanges(changes: SimpleChanges): void {
    const { value } = changes
    if (value) {
      const previousTextValue = this.displayWithFn(value.previousValue)
      const currentTextValue = this.displayWithFn(value.currentValue)
      if (previousTextValue !== currentTextValue) {
        this.updateInputValue(value.currentValue)
      }
    }
  }

ngOnChanges(changes: SimpleChanges): void {
    // Get new adgroups if active account has changed
    if (
      changes.account?.currentValue?.id != changes.account?.previousValue?.id
    ) {
      this.addAdGroupsToTable();
    }
    if (changes.uploadMode) {
      this.displayedColumns$.next(this.getDisplayedColumns());
      this.pageSizeOptions = [5, 25, 50];
      this._changeDetectorRef.detectChanges();
    }
  }

ngOnChanges(changes: SimpleChanges) {
        if (
            (changes.lightDisabled &&
                this.lightDisabled &&
                this.engineFacade.board.currentWhitePlayer) ||
            (changes.darkDisabled &&
                this.darkDisabled &&
                !this.engineFacade.board.currentWhitePlayer)
        ) {
            this.engineFacade.board.possibleCaptures = [];
            this.engineFacade.board.possibleMoves = [];
        }
    }

ngOnChanges(changes: SimpleChanges): void {
    if (changes.color && changes.color.currentValue) {
      this.updateForm(changes.color.currentValue);
      if (this._resetBaseColor) {
        this._baseColor = changes.color.currentValue;
      }

      this._resetBaseColor = true;

      if (!changes.color.firstChange) {
        this.draw();
      }
    }
  }

ngOnChanges(changes: SimpleChanges) {
    const change =
      changes['minDate'] || changes['maxDate'] || changes['dateFilter'];

    if (change && !change.firstChange) {
      const view = this._getCurrentViewComponent();

      if (view) {
        // We need to `detectChanges` manually here, because the `minDate`, `maxDate` etc. are
        // passed down to the view via data bindings which won't be up-to-date when we call `_init`.
        this._changeDetectorRef.detectChanges();
        view._init();
      }
    }

    this.stateChanges.next();
  }

ngOnChanges(changes: SimpleChanges): void {
    if (changes['cashArray'] && !changes['cashArray'].firstChange) {
      this.checkedCashArrayFromComment = [...changes['cashArray'].currentValue];
      fnGetFlattenTreeDataByMap(this.mapOfExpandedData).forEach(row => {
        // 判断缓存中是否有该值，有的话设置成true
        const index = this.checkedCashArrayFromComment.findIndex(item => item.id === row.id);
        this.setIsCheckFn(row, index !== -1);
      })
      this.refreshStatus();
    }
  }

ngOnChanges(changes: SimpleChanges): void {
    if (!this.content) {
      return;
    }

    if (this.setTitle) {
      this.renderer.setProperty(
        this.el.nativeElement,
        'title',
        this.content
      );
    }

    if (!this.searchedWord || !this.searchedWord.length || !this.classToApply) {
      this.renderer.setProperty(this.el.nativeElement, 'innerHTML', this.content);
      return;
    }

    this.renderer.setProperty(
      this.el.nativeElement,
      'innerHTML',
      this.getFormattedText()
    );
  }