Generate an Observable<boolean> from a service function once two subscriptions have successfully completed

I am working on setting up a simple method to compare the current username with a profile's username in an Angular service.

It is necessary for the profile username and user's username to be resolved before they can be compared. How can I create a boolean observable to subscribe to this comparison in components?

This is the code I have so far:

public profileId = new Subject<string>; // Observable string source updated from a profile.component (when the URL displays the profile's username)
public profileId$ = this.profileId.asObservable();
public currentUser = this.principal.asObservable().distinctUntilChanged();

public isProfileOwner(): Observable<boolean> { // A function whose declared type is neither 'void' nor 'any' must return a value.
    this.currentUser.subscribe(user => {
            this.profileId$.subscribe(
                profile => {
                    console.log(profile + ' ' + user.username); // match!
                    if (profile === user.username) {
                        return Observable.of(true);
                    } else {
                        return Observable.of(false);
                    }
                }
            )
        })
}

Even though this is how other responses on SO suggest to achieve this, I am receiving the error

[ts] A function whose declared type is neither 'void' nor 'any' must return a value.

I would like to subscribe to this test in components.

this.authService.isProfileOwner().subscribe(
    data => {
        console.log(data); // should be boolean
    }
)

Answer №1

To accomplish this, Subject must be utilized.

import { Subject } from 'rxjs';

function checkIfProfileOwner(): Observable<boolean> {
        var subject = new Subject<boolean>();

        this.currentUser.subscribe(user => {
                this.profileId$.subscribe(
                    profile => {
                        console.log(profile + ' ' + user.username); // match!
                        if (profile === user.username) {
                            subject.next(true);
                        } else {
                            subject.next(false);

                        }
                    }
                )
            })
            return subject.asObservable();
    }

Answer №2

Another solution pointed out by @user184994 is that combineLatest should be used instead of forkJoin in this scenario. Following a similar approach to @user184994's implementation, the service code can be adjusted as shown below:

isProfileOwner(): Observable<boolean> {
  return Observable.combineLatest(this.currentUser, this.profileId$)
    .map(results => {
       let user = results[0];
       let profile = results[1];
       return (user.username === profile)
    });
}

DEMO

Answer №3

If you're looking for a solution to handle multiple observables and convert them into an Observable of booleans, I highly recommend using forkJoin followed by flatMap.

const combinedObservables = forkJoin([
    this.currentUser,
    this.profileId$
]);

combinedObservables.pipe(
    flatMap(results => {
        user = results[0];
        profile = results[1];
        return of(profile === user.username);
    })
);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Data in Fusioncharts appears to be correctly formatted, but it is having difficulties

I am developing a financial analysis tool and I need to visualize stock data using fusion charts. Currently, my dataset includes stock values along with their respective dates: $scope.chartData = [ { "label": "2017-05-11 16:00:00", "value": "930.6" } ...

Error: Import statement is invalid outside of a module in next.js

Every time I attempt to run the register.tsx page in my next.js project, I encounter the error message shown below. My Next.Js project utilizes TypeScript. import React, { useState } from 'react'; ^^^^^^ SyntaxError: Cannot use import st ...

Using AngularJS to inject a service into a static property of a standard class

For my current project, I am combining TypeScript and AngularJS. One of the challenges I'm facing is how to instantiate a static member of a public class (not controller, just a normal class) with a service object. When it comes to controllers, utiliz ...

Transition your PHP application to Angular gradually

Our current setup consists of a Multi Page PHP Application that we are looking to migrate to Angular 4 in stages. This will allow us to gradually transition our modules over the span of a few months. While we have Node.js installed on our localhost testin ...

ES7 Map JSON introduces a new feature by using square brackets

Currently, I am utilizing core-js for the Map collection because it appears that ES7 Map includes a Map to JSON feature that is absent in ES6 Map. (ES6): JSON.stringify(new Map().set('myKey1', 'val123').set('myKey2', 'va ...

Utilizing Variables in TypeScript to Enhance String Literal Types

Here are my codes: export const LOAD_USERS = 'LOAD_USERS'; export const CREATE_USER = 'CREATE_USER'; export interface ACTION { type: string, payload: any } I am trying to limit the possible values for ACTION.type to either 'L ...

The ts-jest node package's spyOn method fails to match the specified overload

Currently, I'm exploring the usage of Jest alongside ts-jest for writing unit tests for a nodeJS server. My setup is quite similar to the snippet below: impl.ts export const dependency = () => {} index.ts import { dependency } from './impl.t ...

What steps should I take to set up an automated polling system for real-time data updates in Angular?

Hello everyone, I am currently delving into the world of Angular and facing a challenge with refreshing service data automatically by making API requests at regular intervals. The focus is on a particular service where I aim to update the shopPreferences f ...

Exploring Opencascade.js: Uncovering the Real Text within a TCollection_ExtendedString

I am currently attempting to retrieve the name of an assembly part that I have extracted from a .step file. My method is inspired by a blog post found at , however, I am implementing it using javascript. I have managed to extract the TDataStd_Name attribut ...

What is the necessity of ngrx/store when services and localStorages are available for use?

When it comes to Angular, we rely on ngrx/store to manage the state. However, I question whether all tasks can be effectively handled using services alone. What benefits does implementing the ngrx/store package offer? Your insights would be greatly appre ...

Generating Tree Structure Object Automatically from Collection using Keys

I am looking to automatically generate a complex Tree structure from a set of objects, with the levels of the tree determined by a list of keys. For example, my collection could consist of items like [{a_id: '1', a_name: '1-name', b_id ...

Narrowing down types within an array of objects

I am encountering an issue with the following code snippet: const f = (x: unknown) => { if (!x || !Array.isArray(x)) { throw new Error("bad"); } for (const y of x) { if (!y || typeof y !== "object") { throw new E ...

The ultimate guide to successfully implementing Angular Service Workers on IE11

Can the Angular Service Worker be utilized in IE11? Although CanIuse indicates that IE11 is not supported, there is a Polyfill available for older browsers that offers Promises support - the foundation on which the Service Worker operates. Has anyone succ ...

Is the new Angular 2 CLI tool incorporating Systemjs?

Seeking Answers Curious about the absence of systemjs.config.js file when using the new Angular2 CLI setup tool. Is there a way to install a basic version of Angular 2 without relying on the CLI tool available on angular.io? Past Experience In the past, ...

I am encountering difficulty accessing my index.html file located in the views directory. Whenever I try to access it through localhost 3000, I receive an error message saying "cannot get"

My files are available for viewing on github at https://github.com/elmoreka/myTaskLIst.git. I'm experiencing issues with my index.html file located in the views directory. When trying to access localhost 3000, I receive an error stating "cannot get". ...

In order for the expansion parameter to be successfully used, it must be either of tuple type or passed to the

const myFunction = function(arg1: number, arg2: number, arg3: number) {} const myFunction1 = function() {} const obj = { myFunction, myFunction1 }; type FuncType = typeof obj; function executeFunction<T extends keyof FuncType>(key: ...

Issue: Unable to locate a differ that supports the object '[object Object]' of type 'object'. NgFor can only bind to Iterables like Arrays

I have successfully pulled data from the jsonplaceholder fake API and now I am attempting to bind it using Angular 2 {{}} syntax. However, I encountered an error that states: "Error: Cannot find a differ supporting object '[object Object]' of typ ...

Steps for upgrading Angular from version 15 to 16

Currently in the process of updating my Angular version from 15 to 16. I have uninstalled all npm packages and re-installed them with the latest versions available. Despite this, the Angular version still displays as "15.1.0". Does anyone know how to co ...

Place the cursor at the conclusion of the text box

I am working on creating a user input form for chat messaging and I need some help. Here is the HTML-code snippet that I am currently using: HTML-code Currently, when the user presses ENTER, I retrieve the text from the textbox and save it. If the user ...

The offline functionality of the Angular Progressive Web App(PWA) is experiencing difficulties

As per the official guidelines, I attempted to create a PWA that functions in offline mode using pure PWA without angular-cli. However, despite following the official instructions, I was unable to make it work offline. The document in question can be foun ...