Change detection for async Observable.

This issue has been created since 2022-11-23.

Which @angular/* package(s) are relevant/related to the feature request?

core

Description

Not sure if this is a bug, improvement or feature request. But currently the "async" pipe is not a guarantee to safely update the UI when the value changes. If the value is an Observable and the next method of the underlaying Subject is updated outside the zone, the template does not update. I thought that an Observable in template with async always automatically updates the value / triggers change detection (depending on update strategy). Currently I have to call next in NgZone#run. Why does Angular not subscribe to it when using async and updates the template when the value changed? This behavior is maybe intended. But what do you think to simplify this case? For example with an option in Component config or a special pipe like inZone or a configuration for async.

Proposed solution

It would be great there is an easy way to update values in template which are changed outside the zone. Especially for Observables. Personally I expect UI updated when using observable | async. Regardless if observable.next(value) is run outside the zone or not. And for external observable, I need to wrap it to run in zone. Results in too much confusing and ugly code. Maybe I missed something what solve my issue. But consider to add this if there is no elegant solution yet.

Alternatives considered

I have to wrap any value to run in zone. Subscribe to observable and unsubscribe on component destroy.

class MyComponent {
  subscription: Subscription;
  ngOnInit() {
    this.subscription = this.observable.subscribe((value) => this.ngZone.run(() => this.value = value));
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Background: I get values as observables from an external library (native plugins on Android; Ionic; Cordova) which doesn't run in Angular Zone. But I want this be updated in Angular HTML template. Workaround is wrapping in zone or e.g. use setInterval dummy for period trigger change detection.

Possible solution to wrap a value in zone (e.g. just set the same value to it):

<div>{{ myValue | async | inZone }}</div>

Summary

It would be great if I could tell Angular to run everything in template in its Zone. Either as config in Component or pipe, etc.

(Angular 14)

JeanMeche wrote this answer on 2022-11-23

A related ticket #36139

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-12-01
Star Count 85220
Watcher Count 3042
Fork Count 22607
Issue Count 1316

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
Memory fragmentation prevents memory release on Linux 4 2021-10-04 2022-10-20
should apply License 2 2022-05-07 2022-11-11
Bug: Block conversion issues (crash) 3 2022-04-14 2022-10-27
[BUG] Capture to file after line dynamically created with templater 0 2021-11-18 2022-10-12
Bug: keyboard extra animation 4 2021-11-30 2022-10-17
Unable to mock mediator in controller test 0 2022-06-14 2022-10-29
What's causing 401 Failed to join guild on new tokens? 3 2022-06-28 2022-11-03
大佬您好,今天尝试拉取您的docker 环境出现了下面的错误,请问如何解决? 0 2021-05-16 2022-10-09
[SUGGESTION] add library fivem-rpc to core 0 2021-12-30 2022-10-09
Different account names for 2FA codes depending on how it is invoked 8 2021-09-29 2022-11-17
Continuing oop dot completions 18 2021-12-15 2022-09-20
Tag has concurrent access problem 0 2022-09-19 2022-11-23
Proper way to create new geometries? 5 2019-12-20 2022-11-06
Whether mapping of nullable types can be supported? 0 2022-06-17 2022-11-18
使用kotlin 构建的脚本 settings.gradle.kts ,无法解析 applyNativeModulesSettingsGradle(settings) 2 2021-09-16 2022-10-09
TNB Ecosystem BOT - Milestone #1 2 2021-10-31 2022-10-17
Support `use enum enumName { const1, const2, const3 };` 8 2021-12-09 2022-08-29
test/regex/ferguson/readfre.chpl fails on OSX 3 2021-12-08 2022-07-17
Resizing a review results in a "Review by [NULL USER]" 0 2022-05-16 2022-11-09
Moudule can't resolve 3 2021-08-10 2022-11-19
Fatal error, Logseq not loading in macOs 2 2022-09-28 2022-10-10
Provide an example for browsing an album and play the songs in this album 0 2021-01-13 2022-10-18
How to handle exceptions from promises with useAsyncCallback 3 2020-10-27 2022-11-19
Unable to connect to my nextcloud 6 2021-10-07 2022-11-30
Internal Server Error 6 2021-10-09 2022-11-26
Redirect meeting post to supplied link 0 2021-11-17 2022-10-12
[Feature]: Platform Operators can follow manual instructions to install Contour 0 2021-09-23 2022-11-04
amp bind to hidden does not work on page load even with default state 1 2021-09-28 2022-10-24
Logging bucket generates a name with a duplicate 3 2021-11-09 2022-11-16
Add a hybrid link-following option 9 2019-04-23 2022-10-15
[IPv6] NPTv6 should be able to track WAN interface address changes 1 2021-08-03 2022-10-13
Top Site image using condition 0 2020-06-01 2022-11-24
Background syncing automatically 0 2021-09-27 2022-11-16
creating new remote with config_is_local=false gives localhost URL 8 2021-11-17 2022-10-25
Filter package list by UI framework 0 2021-05-28 2022-11-22
[Question] diffget all? 1 2022-01-20 2022-10-20
Exception on receiving new slack events 2 2020-10-13 2022-11-05
config on package.json 1 2021-12-29 2022-10-27
How i can use computed? 1 2021-10-02 2022-11-23
Interrupt kernel action appears disabled 3 2022-05-05 2022-11-12
Switch localization story so we get free loc 1 2022-05-05 2022-10-21
P2432R1 Fix `istream_view` 0 2021-10-05 2022-11-20
Gradle build failed in idea2017.3 2 2020-02-08 2022-10-09
Help Suriname fight deforestation by opening NTFP bioeconomy facilities in collaboration with the local communities 1 2022-11-09 2022-11-22
Next Step Microgrant: TRIKL - Read, Write & Earn Rewards 2 2022-11-12 2022-11-22
Next Step Microgrant: Greenlit Protocol 2 2022-11-11 2022-11-22
Next Step Microgrant :CloudSlit builds on FVM 2 2022-11-10 2022-11-22
WebSecurityExpressionHandler bean not present (breaks Thymeleaf security dialect) 2 2013-07-01 2022-11-04
Update SNAPSHOT naming conventions 0 2020-08-10 2022-11-11
AllowInsecureTransport & EnableUnsecuredResponse in SecurityBindingElement class 2 2022-04-28 2022-11-14