Cannot receive queryparameters sent in Angular routing

Question

I have a component that routes to another component passing some conditional parameters

This the code that defines the routing:

redirect(topicname : string){
    alert(topicname)
    this.router.navigate(['/chapters'], { queryParams: { topic: topicname } });
  }

And on the Chapters.component.ts file I have defined:

export class ChapterstemplComponent implements OnInit {
  topic : string;
  constructor( private route : ActivatedRoute) { 
    this.topic= this.route.snapshot.params.topic;
    alert( this.route.snapshot)
  }

But this.topic does not receive any value. I want to use it in my HTML file of chapters.component. NOTE: The alert messages confirm that 'topicname' was sent well in the first snippet But in the second snippet, the route did not receive any parameters Here is the image for the same:

1st/sending alert:

2nd/receiving alert:

Ganesh · Accepted Answer · 2021-06-05 12:03:19Z

1

We can get query params with the help of paramMap

Try to do something like below, which will get the params in subscription of queryParams of ActivatedRoute.

ngOnInit() {
 this.route.queryParams.subscribe(params => {
    this.topic = params['topic'];
  });
}

You can also read more about routing in detail here: navigate-to-other-page

Happy Coding.. :)

edited Jun 5, 2021 at 12:03

answered Jun 5, 2021 at 11:55

Ganesh

6,0663 gold badges26 silver badges43 bronze badges

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

3 Comments

suman Over a year ago

Wow, thanks ! your detailed post clarified my doubt would you please help with another thing... What the difference between doing thing this subscription of parameters inside constructor and inside ngOnit... Itried and both working.. I am new to angular please help!

thecOdemOnkey Over a year ago

@suman This is only a timing issue. You can do both since they get called both only once. I would go with ngOnInit. see also: angular.io/guide/lifecycle-hooks#peek-a-boo

Ganesh Over a year ago

@suman first difference is constuctor is from regular typescript special method where as ngOnInit() is life cycle method of angular which will be called after component variables and methods initialisation. So it’s recommended to use ngOnInit() for bindings and api calls.

Collectives™ on Stack Overflow

Cannot receive queryparameters sent in Angular routing

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related