How to access query params from a url using activated router in angular?

Question

I need to access the current url with query params using an activate router.

 constructor(private router: Router,
              private route: ActivatedRoute) {
  }

 ngOnInit() {
    this.router.events.pipe(
          filter((event: RouterEvent) => event instanceof NavigationEnd && event.url.startsWith('/resources'))
        ).subscribe(() => {
          console.log(this.route.snapshot.params)
        })

}

When I access my url, http://localhost:4200/web/#/resources/sharepoint;siteId=docs;displayName=test;resourceId=4

this.route.snapshot.params

prints an empty array. How can I access the query param "resourceId"?

I have tried this.route.snapshot.queryParams and still it prints an empty array.

Cagri Tacyildiz · Accepted Answer · 2020-06-16 19:17:11Z

2

read with this.router.url then split it

constructor(private router: Router) {
   var url=this.router.url;
    var params=url.split(";");
    var resourceId=params[params.length-1].split("=")[1];
}

answered Jun 16, 2020 at 19:17

Cagri Tacyildiz

17.7k6 gold badges38 silver badges61 bronze badges

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

Comments

P.M · Accepted Answer · 2022-08-24 21:13:23Z

0

There has been a handy API add on to the old ActivatedRoute class. The queryParamMap() utility gets directly to the route query parameters, and provides a Map object to interact with.

It can be used as in the following example, with some variations:

Component({template: `{{resourceId$ | async}}`, selector: 'some-cmp'})
export class SomeCmpComponent{
resourceId$: Observable<string>; 
constructor(private route: ActivatedRoute) {}

 ngOnInit() {
    this.resourceId$ = this.route.queryParamMap.pipe(
     map((params: ParamMap) => params.get('resourceId'))
    );
 }
}

I hope this helps.

answered Aug 24, 2022 at 21:13

P.M

3,1983 gold badges47 silver badges59 bronze badges

Collectives™ on Stack Overflow

How to access query params from a url using activated router in angular?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related