Angular 5 remove query param
This is the best sulotion that i found, you can change url parameters
in constructor use
private _ActivatedRoute: ActivatedRoute
then use this in init or in constructor body
var snapshot = this._ActivatedRoute.snapshot;
const params = { ...snapshot.queryParams };
delete params.pos
this.router.navigate([], { queryParams: params });
UPDATE: @epelc's answer below is the up-to-date and correct way to do this: https://stackoverflow.com/a/52193044/5932590.
Unfortunately, there is no clear-cut way to do this currently: https://github.com/angular/angular/issues/18011. However, as jasonaden commented on the linked thread,
This could be done manually by merging the old and new query params, removing the key you don't want.
Here is one way to do that:
Let's say you have your queryParams stored in some properties.
class MyComponent() {
id: string;
pos: string;
sd: string;
constructor(private route: ActivatedRoute, private router: Router) {}
ngOnInit() {
this.route.url.subscribe(next => {
const paramMap = next.queryParamMap;
this.id = paramMap.get('id');
this.pos = paramMap.get('pos');
this.sd = paramMap.get('sd');
});
}
}
A method to clear the pos
parameter would look like this:
clearPosParam() {
this.router.navigate(
['.'],
{ relativeTo: this.route, queryParams: { id: this.id, sd: this.sd } }
);
}
This will effectively navigate to the current route and clear your pos
query parameter, keeping your other query parameters the same.
You can remove a query parameter by using the merge
option of queryParamsHandling
and passing in null
for any params you wish to remove.
// Remove query params
this.router.navigate([], {
queryParams: {
'yourParamName': null,
'youCanRemoveMultiple': null,
},
queryParamsHandling: 'merge'
})
This option is simpler and requires less work to ensure you are not removing other params. You also do not need to worry about cleaning up an observable subscription when your component is destroyed.