Situation : Utilizing an Angular PWA for communication with an iOS native app via WKWebview. Implementing messageHandlers to facilitate data sharing between TypeScript and Swift logic code.
Issue : Employing addEventListener to monitor a specific event on the window object. When subscribing to an observable in my component to listen for changes, the variable modifications do not take effect within the subscribe method.
myService.ts
public myValue$ = new Subject<number>();
window.addEventListener('didDeviceDisconnected', (e) => {
...
this.dispatchInfo(someInfo);
});
private dispatchInfo(value: number) {
this.myValue$.next(value);
}
public getValue(): Observable<number> {
return this.myValue$.asObservable();
}
myComponent.ts
// Waiting for the notification
this.myValueSubscription = this.myService.getValue().subscribe(value => {
this.myValue = value;
alert("myValue : " + this.myValue);
})
myComponent.html
{{ myValue }}
The alert correctly displays the value, but the DOM indicates that the value is undefined. Attempts such as adding setTimeout inside the subscribe function have been unsuccessful. How can I implement the change from the subscribe method? Is it beyond the angular scope?