Connect an Observable to the template with async binding

Question

Connect an Observable to the template with async binding

I've been attempting to link an Observable to a template variable in Angular using the following code:

[class.active]="isBookmarked$ | async"

During the ngOnInit function, I initialize the Observable:

var promise = this.cacheService.getItem(this.bookmarkId).then(() => {
    return true;
}).then(() => {
    return false;
});
this.isBookmarked$ = Observable.fromPromise(promise);

Everything works as expected upon loading the page. However, when I add or remove an item, the template fails to detect the changes.

this.cacheService.removeItem(this.bookmarkId).then(() => { });
// or
this.cacheService.saveItem(this.bookmarkId, true, "bookmarks").then(() => { });

I have experimented with various Observables and even attempted using a Promise without converting it to an Observable, but unfortunately, I haven't been able to resolve the issue.

angular typescript asynchronous observable angular-pipe

Answer 1

Answer №1

Considering promises are triggered only once, any subsequent notifications won't be received. To address this, one approach would involve encapsulating cacheService within a new service (if altering the original isn't feasible) in the following manner:

import { Subject } from "rxjs/Subject";
import "rxjs/add/operator/filter";
import "rxjs/add/operator/map";
import { Injectable } from '@angular/core';

interface CacheService {
    getItem(key: any): Promise<any>;
    setItem(key: any, value: any): Promise<any>;
}

interface Item {
    key: any;
    value: any;
}

@Injectable()
export class ObservableCacheService {
    protected readonly items$ = new Subject<Item>();

    constructor(protected readonly cacheService: CacheService) {}

    getItem(key: any) {
        this.cacheService
            .getItem(key)
            .then(value => items$.next({ key: key, value: value }));
        return items$
            .filter(item => item.key === key)
            .map(item => item.value);
    }

    setItem(key: any, value: any) {
        this.cacheService
            .setItem(key, value)
            .then(() => items$.next({ key: key, value: value }));
    }
}

Answer 2

Considering promises are triggered only once, any subsequent notifications won't be received. To address this, one approach would involve encapsulating cacheService within a new service (if altering the original isn't feasible) in the following manner:

import { Subject } from "rxjs/Subject";
import "rxjs/add/operator/filter";
import "rxjs/add/operator/map";
import { Injectable } from '@angular/core';

interface CacheService {
    getItem(key: any): Promise<any>;
    setItem(key: any, value: any): Promise<any>;
}

interface Item {
    key: any;
    value: any;
}

@Injectable()
export class ObservableCacheService {
    protected readonly items$ = new Subject<Item>();

    constructor(protected readonly cacheService: CacheService) {}

    getItem(key: any) {
        this.cacheService
            .getItem(key)
            .then(value => items$.next({ key: key, value: value }));
        return items$
            .filter(item => item.key === key)
            .map(item => item.value);
    }

    setItem(key: any, value: any) {
        this.cacheService
            .setItem(key, value)
            .then(() => items$.next({ key: key, value: value }));
    }
}

Connect an Observable to the template with async binding

Answer №1

Similar questions

Utilizing a TypeScript function to trigger an action from within a Chart.js option callback

Can an interface be designed to have the option of containing either one property or another?

Mastering the Art of Injecting Objects from the Server

How can you transform an object literal AST from a TypeScript file into executable code?

Encountering an issue with creating an App Runner on AWS CDK

Invoke the method saved as a class attribute

I encountered an error while attempting to create an npm package from a forked repository on GitHub

Listening for Angular 2 router events

What impact does nesting components have on performance and rendering capabilities?

Implementing rxjs switch between multiple observables

Transitioning from one provider to another and encountering the error message "Cannot read property prompt of undefined."

The expected function is being executed, yet none of the inner functions are invoked

The given 'FC<ComponentType>' type argument cannot be assigned to the 'ForwardRefRenderFunction<unknown, ComponentType>' parameter type

Incorporate a personalized Cypress function for TypeScript implementation

"Encountering issues with importing Splitpanes while using VueJs and TypeScript combination

An issue has occurred: TransformError SyntaxError: Unexpected keyword 'const' was encountered

Vue + TypeScript prop type issue: "'Foo' is intended as a type, but is being treated as a value in this context."

Guide to setting up a one-to-many self relation entry in Prisma

Showing object data in TypeScript HTML when the object property starts with a numeral

Typescript patterns for creating a modular library design