CODEWITHSUNDEEP
angularquery-string
user14756523
user14756523

Reputation: 1

Query param is not storing the right value

I am a new programmer so sorry if this question is dumb...I am trying to get my router which is redirecting to this link to set the value of my viewMode to 3 and change the link using query params. So far, the link changes correctly and shows https..../?sidePanelMode=3 correctly but when I console.log the value of viewMode, it is not changed. I am not sure how to set the value correctly, can someone help me here?

This is the code inside my .service that redirects to the component:

case 13: // Commented on project
                this.router.navigate([`/translate/:mode/${notification.entityID}`], { queryParams: { viewMode: 3 } });
                break;

This is the component.html after importing all the necessary components and directives,

    constructor(private activatedRoute: ActivatedRoute){
    
}

ngOnInit() {
    console.log("view mode is: " + this.viewMode);
}

export class EditorComponent implements OnInit { 
    sidePanelMode = -1; 
}

Upvotes: 0

Views: 500

Answers (1)

chrismclarke
chrismclarke

Reputation: 2105

There's two different types of parameters here, route params and query params.

Route params are used to identify part of the URL as a parameter value and should be defined in you routing file (e.g. app-routing.module) within the Routes field.

So in your router you only need to pass the value into the navigation, and that can be picked up within the component, e.g.

routes = [
  {
    path: "translate/:viewMode",
    component: EditorComponent,
  },

app-routing.module.ts

this.router.navigate([`/translate/${viewMode}/${notification.entityID}`])

or you can specify as separate array entries: this.router.navigate(['/translate',viewMode,notification.entityId])

And within the component read the value

ngOnInit() {
    console.log("view mode is: " + this.activatedRoute.snapshot.paramMap.get('viewMode'));
}

You can see more examples at: https://angular.io/guide/router-tutorial-toh#route-parameters

Query params are for when you append ? after the URL and read values from there, and are generally more useful if you want to preserve a variable across multiple routes. They are handled in a similar (but different) way, with examples at: https://angular.io/guide/router-tutorial-toh#query-parameters-and-fragments

Upvotes: 1

Related Questions