The combination of Angular's ngrx and Router.Events within Rxjs does not seem to function as intended

I'm facing a challenging problem that I can't seem to resolve:

onSelectCompany() {
 combineLatest([this.idCompany$, this.idUser$, this.router.events]).subscribe(res => {
   if(res[2] instanceOf NavigationEnd){
     this.router.navigateByUrl(`get-info/${res[0]/res[1]`)
   }
 })
}

Initially, I call this function within the ngOnInit of my component. I have two observables that serve as parameters for my URL, and I only want to navigate to this URL if the page has not been refreshed. However, the function doesn't work as expected - there are no errors, but upon debugging, it seems that the execution does not enter the subscription block. Why could this be happening?

angulartypescriptrxjsobservablengrx

Answer №1

It is important for all 3 observables to emit something once that function has been executed successfully.

For more information, visit: https://www.learnrxjs.io/learn-rxjs/operators/combination/combinelatest

One thing to note is that combineLatest will only output a value 
once each observable emits at least one value.

An effective solution could involve moving the function either from ngOnInit to the field level or into the constructor.

Answer №2

To potentially circumvent this issue, consider utilizing the startWith operator to mimic the router event. Additionally, it may simplify your code to destructure the results of the combineLatest function instead of relying on array indexes.

handleSelectedCompany() {
 const helper$ = this.router.events.pipe(startWith(null)); // or use a default value
 combineLatest([this.companyId$, this.userId$, helper$])
 .subscribe(([ companyId, userId, routerEvent ]) => {
   if(routerEvent instanceOf NavigationEnd){
     this.router.navigateByUrl(`fetch-details/${companyId}/${userId}`)
   }
 })
}

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

What is the process of obtaining a body response through Interception?

I'm currently using Angular and I need to capture the body request in my interception method. Here is what I have tried so far: return next.handle(request).pipe( catchError(err => { return throwError(err); })) I at ...

angularangular7

Angular Material Slide-Toggle Takes Too Long to React

In my project, I am facing an issue with a control panel that contains an Angular Mat-Slide-Toggle element. Here is the code snippet: <mat-slide-toggle (change)="onQAStateDisplayChanged($event)">Display QA Status</mat-slide-toggle> When the c ...

angularangular-material

The deployment of my Node application on Heroku is causing an error message: node-waf is not

I've been trying to deploy my Node.js application on Heroku by linking it to my Github repository and deploying the master branch. Despite experimenting with various methods, I keep encountering the same error every time. You can view the detailed b ...

javascriptnode.jstypescriptherokudeployment

An error has occurred in the tipo-struttura component file in an Angular application connected with a Spring backend and SQL database. The error message indicates that there is a TypeError where the

Working on my project that combines Spring, Angular, and MYSQL, I encountered a challenge of managing three interconnected lists. The third list depends on the second one, which in turn relies on user choices made from the first list. While attempting to l ...

mysqlarraysangularspring-bootonchange

Using TypeScript to import npm modules that are scoped but do not have the scope name included

We currently have private NPM packages that are stored in npmjs' private repository. Let's say scope name : @scope private package name: private-package When we install this specific NPM package using npm install @scope/private-package It ge ...

typescriptnpmnode-modules

Troubleshooting: Angular universal 7 unable to initiate HTTP requests

Recently, I've embarked on the journey of converting my Angular 7.2.0 application into an Angular universal app. The process has been successful in rendering server-side and transferring state swiftly on high-performance PCs and fast internet connecti ...

angularexpressangular7server-side-renderingangular-universal

Is there a way to logout when the select event occurs using the key?

I am trying to figure out how to log out the key value when the select event is triggered. Specifically, I want to access the key={localState.id} within the <select></select> element in my HTML. This key value is crucial for a conditional stat ...

javascriptreactjstypescript

Custom objects do not return true for Symbol.hasInstance

The TypeScript playground encounters an issue with the Symbol.hasInstance built-in symbol, while it functions properly for other symbols. Testing other symbol methods such as Symbol.match and Symbol.replace show no problems, but Symbol.hasInstance is not ...

arraystypescriptsymbols

The issue encountered during a POST request in Postman is a SyntaxError where a number is missing after the minus sign in a JSON object at position 1 (line 1

Running my API in a website application works flawlessly, but encountering SyntaxError when testing it in Postman - specifically "No number after minus sign in JSON at position 1" (line 1 column 2). The data is correctly inputted into the body of Postman a ...

javascripttypescriptnext.jspostman

Guide to setting up a Mock Authentication Service for testing in Angular 6 using Jasmine

I am currently working on implementing a mock AuthService for my Angular 6 Jasmine component test. I am facing some difficulties in configuring it properly to "sign in" and utilize my MockAuthService effectively. What specific configurations am I overlook ...

angulartestingjasmine

Combine two Observable arrays into a single array and showcase their contents using ngFor within an Ionic 3 application

In my Ionic 3 project, I am fetching two arrays through API calls. My goal is to display the data from both arrays in the same line like this: [item1.1] [item2.1] [item1.2] [item2.2] [item1.3] [item2.3] Instead of displaying them like this: [item1.1] ...

angularionic-frameworkionic3observablengfor

Angular 8 ngBootstrap - Resizable and Draggable Modal Feature

Currently, I am attempting to integrate Bootstrap version 4 with Angular 8. My main goal is to create a modal that is both re-sizable and draggable. Although there are some examples available for other versions such as 3.xx, none seem to be specifically de ...

angularbootstrap-4bootstrap-modalangular8ng-bootstrap

Troubleshooting: Issue with Angular routerlink not functioning in the sidebar section of SB Admin 2 Bootstrap 4 template

I am currently in the process of integrating the SB Admin2 template with my Angular 7 project. Unfortunately, I have encountered an issue where the links in the sidebar are unresponsive and not clickable at all. However, when I place a router link within t ...

angularsassbootstrap-4angular-routerlink

How can I implement a dynamic progress bar using Ionic 4?

I am currently working on developing a progress bar that increases by 1% every time the user clicks a button. This is what my HTML code looks like: <ion-button *ngFor="let progress of progress" (click)="add(progress)">Progress</ion-button> &l ...

angulartypescriptionic-frameworkprogress-bar

Include the particules.js library in an Angular 4 project

I am currently working on integrating Particles.js into my Angular project, but I am facing an issue with the Json file not loading. import { Component, OnInit } from '@angular/core'; import Typed from 'typed.js'; declare var particl ...

javascriptjsonangular

Typescript: When using ts-node-dev, an error occurred while trying to import express due to an unexpected

I am embarking on a fresh project using Typescript and I intend to set up the node server with typescript utilizing express. There's a helpful tutorial that explains how to execute a Typescript file without going through the hassle of compiling files, ...

node.jstypescriptexpressts-node

Elementary component placed in a single line

Creating a text dropdown menu using the following code: import { Autocomplete, TextField } from '@mui/material' import React, { useState } from 'react' const options = [ 'Never', 'Every Minute', 'Every 2 ...

reactjstypescriptmaterial-ui

What is the best way to outline the specifications for a component?

I am currently working on a TypeScript component. component @customElement("my-component") export class MyComponent extends LitElement { @property({type: String}) myProperty = "" render() { return html`<p>my-component& ...

javascripttypescriptweb-componentlit-element

What is the process for moving information between files?

I have two files which are named as, employee-rates-controller.ts: private load() { return this.entityService .load(this.$scope.projectRevisionUid) .then(resp => { localStorage.removeItem('employeerates'); this.$ ...

javascriptangularjstypescript

What is preventing Typescript from inferring the type when assigning the output of a method with a return type to a variable?

My reusable service has a public API with documentation and types to make client usage easier. interface Storable { setItem(key: string, value: string): any; getItem(key: string): string; removeItem(key: string): any; } @Injectable({ providedIn: & ...

angulartypescriptvisual-studio-codetypesinterface