How to get parameters from URL in Angular

Question

I'm including routing in my Angular 7 application on a feature module. A component belonging to this feature needs to get the route parameter. How do I do this?

I've tried using the method shown in the docs as shown in the code below. I have commented which one works and which one doesn't. I want to use the second method which doesn't work since it maps the results to the products$ observable that I will use in my template. What could be the problem?

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, ParamMap } from "@angular/router";
import { Observable } from "rxjs";
import { switchMap } from "rxjs/operators";

import { Product } from "@shared/interfaces/product.interface";

import { ProductsService } from "../products.service";

@Component({
  templateUrl: "./product-list.component.html",
  styleUrls: ["./product-list.component.css"]
})
export class ProductListComponent implements OnInit {
  products$: Observable<Product[]>;

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

  ngOnInit() {
    this.route.paramMap.subscribe((params: ParamMap) => {
      console.log(params.get("category")); // this works
    });

    this.products$ = this.route.paramMap.pipe(
      switchMap(params => {
        console.log(params.get("category")); // this doesn't work
        return this.service.getProducts(params.get("category"));
      })
    );
  }
}

I expected the second method to log the results but it doesn't at all.

Does anything currently .subscribe() (or | async) to this.products$? — jonrsharpe
– jonrsharpe, Commented Mar 23, 2019 at 11:12
no i hadn't added any of those. now that i have an | async method in my template it works. thanks — Melvin Otieno
– Melvin Otieno, Commented Mar 23, 2019 at 11:20

Andrei · Accepted Answer · 2019-03-23 11:13:10Z

1

rxjs observables are lazy, so if no subscription is done, your source is not even trying to get data. Add this.products$.subscribe() in the end of ngOnInit and you will see your console.log result.

answered Mar 23, 2019 at 11:13

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Melvin Otieno · Accepted Answer · 2019-03-23 11:23:43Z

1

I have accepted Andrei's answer but i have also learned that adding | async in the template file solves the problem because as Andrei noted, no subscription had taken place yet

answered Mar 23, 2019 at 11:23

Melvin Otieno

792 gold badges2 silver badges17 bronze badges

Comments

Thivanka Saranatha · Accepted Answer · 2019-03-23 12:55:37Z

1

Andrei is true rxjs observables are lazy problem will solve by adding this.products$.subscribe() but unlike angular Router the other service subscription will not stop until you unsubscribe it. So remember to unsubscribe in on ngOnDestroy()

answered Mar 23, 2019 at 12:55

Thivanka Saranatha

3624 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to get parameters from URL in Angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related