Change detection not working on angular elements + NgRx

Question

I was trying to work with custom elements + NgRX and tried to integrate the custom element in an angularjs app. Whenever from my angularjs app I am calling the custom element exposed method change detection is not happening.

Calling code in angular js const customElement= angular.element('hello-ce')[0]; customElement.refreshSettingProgressValue(settingsPage);

Exposed method in Angular 7 + @ngrx/store + Custom Elements:

  ngOnInit(): void {
    this.isLoading$ = this.store.pipe(select(landingPageQuery.getLoading));
    this.categories$ = this.store.pipe(
      select(landingPageQuery.getAllLandingPage)
    );
  }
  @Input()
  public refreshSettingProgressValue = function (this: CompType, settingCategoryCode: string) {
    this.categories$.pipe(
      mergeMap(categories => categories),
      map(category => category.settings),
      mergeMap(settings => settings),
      filter(setting => setting.settingCodeType.code === settingCategoryCode),
      take(1)
    ).subscribe({
      next: (setting) => {
        this.store.dispatch(new ResetSettingsProgressValue(setting));
        this.store.dispatch(new LoadSettingsProgressValue(setting));
      }
    })
  }.bind(this);

I tried calling the _refreshSettingProgressValue _ inside Angular7 app on click of a dummy button and everything works but when I call it outside Angular context I am not able to see the changes in UI. P.S LoadSettingsProgressValue has an effect where we call some api. I see the call is also happening and reducer is also updating the state but change detection doesn't seem to kick in.

I have already tried ngzone-element-strartergy but it didnt resolve my issue

  ngDoBootstrap(): void {
    const elements: any[] = [
      [HelloWorldComponent, 'hello-ce'],
    ];
    for (const [component, name] of elements) {
      const strategyFactory = new ElementZoneStrategyFactory(component, this.injector);
      const el = createCustomElement(component, { injector: this.injector, strategyFactory  });
      customElements.define(name, el);
    }
  }

I believe we can call changeDetection explicitly but with ngrx how and where can we do that?

Thanks

clepere · Answer 1 · 2019-05-16T09:33:49.120

1

I had the same issue on my project and it got solved using this.cd.detectChanges(); when data must be to be updated like this example:

  constructor(private cd: ChangeDetectorRef) {}

  private setState(key, value) {
    this.state = { ...this.state, [key]: value };
    this.cd.detectChanges();
  }

Source: https://angularfirebase.com/lessons/angular-elements-advanced-techniques/

edited May 16 '19 at 09:33

answered May 16 '19 at 09:10

clepere

34
4

score 0 · Answer 2 · answered Apr 12 '19 at 16:00

Finally could get the change detected by running inside ngZone like below:

  this.ngZone.run(() => {
        this.store.dispatch(new ResetSettingsProgressValue(setting));
        this.store.dispatch(new LoadSettingsProgressValue(setting));
  });

Tried firing change detection on every emit value after

    this.categories$ = this.store.pipe(
      select(landingPageQuery.getAllLandingPage),
      tap(_ => this.changeDetectionRef.detectChanges())
    );

but it doesn't work!!!. If anyone has any better solution please post. Thanks

Change detection not working on angular elements + NgRx

2 Answers2