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

Utilize Typescript to Invoke Functions of Different Components in Angular 2

Leveraging the power of Angular 5 to seamlessly integrate two distinct components on

Having trouble with importing rxjs operators

Tips for improving the performance of MongoDB queries in a Node.js environment

Typescript indicates that an object may be potentially null

"Learn how to programmatically close all panels in an ngb-accordion component in Angular 2 Release 6, leaving only

What is the reason for recursion not producing a new object as output?

Ways to show a div when a dropdown option is selected

Implementing Bootstrap 5 JS within an Angular 11 component TypeScript

Troubleshoot: Angular fails to display blog post based on specific ID in web browser

Is there a solution for resolving the 'cannot post error' in nodejs?

The error occurred in Commands.ts for Cypress, stating that the argument '"login"' cannot be assigned to the parameter of type 'keyof Chainable<any>))`

Filtering an object based on a particular string

Tips for debugging and stepping into an npm package containing Typescript source code

Every time a new message is sent or received, I am automatically brought back to the top of the screen on the

Having trouble getting the Angular2 boilerplate to start with npm?

What is the importance of moving prop types into a type or interface in React components?

Incorporating data from an api call to establish the starting state of a react component

Storing information from a mat-select element in MongoDB database

Having difficulty generating the appropriate output for ng-new app