0

I have application with routing, which changes by buttons click (see screen below). I'm trying to get URL into text box every time it's changes. How to do it? So far I been able to attach to ActivatedRoute.queryParams , but it fires only if there are parameter change, and do not work without parameter.

// could you help to fix this code?  
url$ = this.activatedRoute.queryParams.pipe(
    map(() => {
      console.log("router.url="+this.router.url); // full URL with params
      return this.router.url.split('?')[0] ;
    })
  )

I'm changing pages by button click code:

  btnGoProducts(name?: string){
    if (name)
      this.router.navigate(['/products'], {queryParams: {name: name}});
    else
      this.router.navigate(['/products']);
  }

Only right buttons on this screen works (because subscription on the parameters change):

enter image description here

Page code: app.component.ts Whole test app: github.com/sam-klok/AngularPlayRoutes

sam sergiy klok
  • 526
  • 7
  • 17

2 Answers2

1

I'm not sure if I understood you, you are subscribed to queryParams so it will detect when they are changed, if you want to detect route changes and get the whole url (with query parameters) as an Observable you can try this on url$:

Imports:

import { Router, NavigationEnd } from '@angular/router';
import { map, filter } from 'rxjs/operators';

Declaring variable url$:

 url$: Observable<string> = new Observable<string>();

Setting url$ value:

this.url$ = this.router.events.pipe(
  filter((event: any) => event instanceof NavigationEnd),
  map((event: NavigationEnd) => event.url)
);
Bobe
  • 46
  • 9
  • Worked, thank you! Why you wrapped it in JSON.stringify? I need URL to filter and react only on specific urls.. – sam sergiy klok Mar 01 '23 at 22:16
  • This is for globally watching the route, you will end up writing your own route parsing if you do it this way. – Adrian Brand Mar 01 '23 at 23:22
  • @samsergiyklok I've added the stringify by mistake, you can use it without it, try and bind it with async pipe in the html and play with it you will figure it out. – Bobe Mar 04 '23 at 00:02
  • @AdrianBrand He is just playing around, he want to detect it with observable and bind the route change, he can make the route public and bind it with route.url but I guess he want to learn some new things so I've suggested him – Bobe Mar 04 '23 at 00:02
0

There are 2 ways of accessing the params. The first one is using the route.snapshot.paramMap and the second is through the route.paramMap.subscribe.

usage:

import { ActivatedRoute } from "@angular/router";
constructor(private route: ActivatedRoute) { }

and then u can access it for your use:

this.route.snapshot.paramMap.get("name")

Or second way:

this.route.paramMap.subscribe(params => {
  const name = params.get("name")
  });

When to use route.snapshot.paramMap

If you intend not to update your URL parameter within the same component you are accessing it, then you can use the snapshot.

As the name suggests, the parameter would only be accessed once, when the component loads. Hence, it won’t be updated, even if you change its value from within the same component.

When to use route.paramMap.subscribe

If you want to change the URL parameter in the same part of your website, you can use a subscription. This is easy to do in Angular and it only works if you want to change the URL in the same part of the website.

Ashish Ratan
  • 2,838
  • 1
  • 24
  • 50
  • I'm trying to get the URL, not parameters, and unable to. I know my example use params, but it's because I was able to get URL through param change event.. which is not helpful if param do not change. – sam sergiy klok Mar 01 '23 at 23:44