Angular how to use combineLatest to combine routes and queries from website url bar

Question

Im trying to get the route and queries from the url bar. The below code is from a tutorial by CodeWithMosh. I am getting compile error at the combineLatest method.

The error is as follow:

(property) paramMap: Observable Argument of type '{ paramMap: Observable; queryParamMap: Observable; }' is not assignable to parameter of type 'ObservableInput'.
Object literal may only specify known properties, and 'paramMap' does not exist in type 'ObservableInput'

I am a newbie in angular and I'm not sure what does the error mean and I have tried following this stack overflow answer but I still got the error. Thank you.

The full code is as below:

    import { ActivatedRoute } from '@angular/router';
    import { GithubFollowersService } from './../services/github-followers.service';
    import { Component, OnInit } from '@angular/core';
    import 'rxjs/add/Observable/combineLatest';
    import { Observable } from 'rxjs/internal/Observable';
    import { combineLatest } from 'rxjs';

    @Component({
      selector: 'github-followers',
      templateUrl: './github-followers.component.html',
      styleUrls: ['./github-followers.component.css']
    })
    export class GithubFollowersComponent implements OnInit {
      followers : any[];

      constructor(
        private route: ActivatedRoute,
        private service : GithubFollowersService) { }

      ngOnInit() {
        const paramMap = this.route.paramMap;
        const queryParamMap = this.route.queryParamMap;

        combineLatest({
          paramMap, // error here
          queryParamMap
        })
        .subscribe(combined => {
          let id = combined[0].get('id');//the 0 means the 1st 1 which is paramMap from above
          let page = combined[1].get('page');

          this.service.getAll().subscribe(followers => this.followers = followers);
        });


      }

    }

[`combineLatest`](https://rxjs.dev/api/operators/combineLatest) doesn't take an object containing observables. — jonrsharpe, Sep 27 '19 at 09:36
What version of Angular and RxJS are you using? Your first two RxJS imports are not correct for the current version. — DeborahK, Sep 27 '19 at 15:10

DeborahK · Accepted Answer · 2019-09-27T16:09:12.960

2

If you are using the current version of Angular/RxJS, your imports should look like this:

import { combineLatest, Observable } from 'rxjs';

The error you see is incorrect syntax for combineLatest. It should look like this:

  combineLatest([
    paramMap,
    queryParamMap
  ])

Notice the [] instead of the {}

Also, it is a convention to suffix variables containing an Observable with a $.

From the github comments:

Static version of combineLatest accepts either an array of Observables or each Observable can be put directly as an argument.

Link here: https://github.com/ReactiveX/rxjs/blob/95bd8073e33c39a8f8d4ade8bf15c39a1154a879/src/internal/observable/combineLatest.ts

edited Sep 27 '19 at 16:09

answered Sep 27 '19 at 15:13

DeborahK

57,520
12
104
129

Isn't it better to also to use a `switchMap` here since these parameters might change from inside a component? – azerafati Apr 10 '20 at 12:57
1

That could be difficult to discern without more information about the context of this code. Without that context, I just focused on the specifics of the question. – DeborahK Apr 21 '20 at 06:42

score 1 · Answer 2 · answered Sep 27 '19 at 11:03

You are looking for forkJoin to execute a certain code when multiple subscription complete. A pseudo logic to do this is

forkJoin(
  paramMap.pipe(
    tap(res => {
      allParams["param1"] = res.get("param1");
    })
  ),
  queryParamMap.pipe(
    tap(res => {
      allParams["param1"] = res.get("param2");
    })
  )
).subscribe(res => {
  //call your service
});

score 1 · Answer 3 · answered Sep 27 '19 at 15:18

1

Just ditch the { }:

        combineLatest(
          paramMap,
          queryParamMap
        )
        .subscribe(combined => {

No { }, no [ ], just list the streams to combine.

https://www.learnrxjs.io/operators/combination/combinelatest.html

answered Sep 27 '19 at 15:18

mbojko

13,503
1
16
26

Angular how to use combineLatest to combine routes and queries from website url bar

3 Answers3