Removing query parameters in Angular when clicking the back button

I am in need of a way to verify if my income URL follows a specific format and then open a modal to perform an action. I have achieved this using the following code:

route.queryParams.subscribe(async params => {
      if (!isNaN(params.rt)) {
        console.log("URL Match");
        this.show = true;
      } else {
        console.log("URL does not Match");
      }
    });

The required format for my URL is:

www.example.com?=123456

However, after completing the modal process, I would like to remove the query parameter from the URL.

Answer №1

If you want to remove query parameters from a URL, you can use the following method.

let currentUrl: string = this.router.url.substring(0, this.router.url.indexOf("?"));
this.router.navigateByUrl(currentUrl); // The router instance is initialized like this: constructor(private router: Router) {}

For more information, check out this helpful link:

How to clear query params in Angular router (Stack Overflow)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting Docker-compose, Nx, Angular issue "Received no data from localhost."

Attempting to deploy an Angular app with Nx using Docker compose has encountered a problem. docker-compose.yml : services: client: build: context: . dockerfile: Dockerfile volumes: - .:/app - /app/node_modules ports: ...

Once the vuex persist plugin is implemented, I am encountering difficulties in accessing the store within the router

Ever since incorporating the vuex persist plugin, I've been encountering an issue where the store doesn't seem to be accessible in the router. const vuexPersist = new VuexPersist({ key: "vuex", storage: localStorage }); const store = ne ...

Having trouble connecting my chosen color from the color picker

Currently, I am working on an angularJS typescript application where I am trying to retrieve a color from a color picker. While I am successfully obtaining the value from the color picker, I am facing difficulty in binding this color as a background to my ...

Angular issue: Unable to implement Bootstrap dropdown in navbar

I've successfully added popper.js, bootstrap, and jquery to my project. Here is my Angular json file configuration: "styles": [ "src/styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "script ...

Steps for displaying a loader after refreshing data using queryClient.invalidateQueries:1. Utilize the query

I am currently working on a project where I need to redirect to a specific page after updating an item. While the code is functioning correctly, I have encountered an issue with the loader not displaying. export const useUpdateStatusArchiveSurvey = () => ...

The error message "The type 'MouseEvent' is non-generic in TypeScript" popped up on the screen

Having created a custom button component, I encountered an issue when trying to handle the onClick event from outside the component. I specified the parameter type for the onClickCallback as MouseEvent<HTMLButtonElement, MouseEvent>, which is typical ...

Issue C2039: 'IsNearDeath' cannot be found within 'Nan::Persistent<v8::Object,v8 ::NonCopyablePersistentTraits<T>>'

After updating my nodejs to v12.3.1, I encountered errors when attempting to execute npm install in my project directory. error C2059: syntax error: ')' (compiling source file ..\src\custo m_importer_bridge.cpp) error C2660: 'v8 ...

Changing the host in every URL within a string using node.js

I am working with a string that contains URLs with IP addresses: { "auth" : { "login" : "http://123.123.11.22:85/auth/signin", "resetpass" : "http://123.123.22.33:85/auth/resetpass", "profile" : "http://123.123.33.44:85/auth/profile" ...

Observe the classList object of the material element to obtain its properties

I am currently using the mat-autocomplete feature and I am trying to remove focus from the input after selecting an element without needing a click. The mat-focused class within the mat-form-field is responsible for focusing on the mat-auto-complete. By re ...

Map the API response to the color of the column to show which specific column was modified

I need to dynamically change the color of a column in a table based on data updates from an API. Unfortunately, I can't share my code, but I would appreciate any examples or suggestions on how to achieve this. APIs are not my strong suit, so any guid ...

Shift the Kid Element to an Alternate Holder

Currently, I am working on a project in Angular version 10. Within this app, there is a component that can be shared and will utilize the provided content through ng-content. Typically, this content will consist of a list of items such as divs or buttons. ...

The issue arises when trying to access the 'addCase' property on the type 'WritableDraft<search>' within the builder argument of extra reducers

I am a beginner when it comes to using TypeScript with Redux Toolkit and I have encountered an issue with addCase not being available on the builder callback function in my extraReducers. I haven't been able to find a similar situation online, and I s ...

Navigating through Angular to access a component and establishing a data binding

I am looking for the best way to transition from one component to another while passing data along with it. Below is an example of how I currently achieve this: this.router.navigate(['some-component', { name: 'Some Name' }]); In Some ...

Allowing Angular2 Components and their Sub Components to access a shared instance of ngModel within a service

Currently, I have been working on constructing a complex view that requires multiple functionalities. To ensure proper organization, I have divided it into various custom components. I don't want to go into great detail, but I have managed to make it ...

Error message in my Angular project: Invalid Target Error

Out of nowhere, I encountered an invalid target error while running my Angular project with the command: npm start An unhandled exception occurred: Invalid target: {"project":"agmbs","target":"build","configur ...

The TS2339 error has occurred because the "email" property cannot be found on the specified "Object" type

I encountered an issue while using Angular 5, here is the code snippet : signIn(provider) { this._auth.login(provider).subscribe( (data) => { console.log(data); this.hideForm = false; this.emaill = data.email; ...

Leveraging the power of Angular 4 while integrating esri-loader to

Currently, I am embarking on a project to develop a GIS-based application utilizing esri (ArcGIS) in conjunction with Angular 5. While I have come across sample code for esri paired with AngularJS (Angular 1), my search for similar examples using Angular 4 ...

Navigating to the detail page following a POST request in RTK query: A step-by-step guide

In my React RTK-query form, I am facing an issue where after a POST request is made, the form should navigate to the next step. However, in order to do that, I need to obtain the id of the newly created record. The backend auto-increments the id and does n ...

Encountering a surprise focus error in ngui-auto-complete within Angular

In the process of developing a web application, I have encountered an unexpected focus issue with the ngui-auto-complete on one of the pages. Despite not setting any focus event for this particular element, it remains focused once the content is initialize ...

Can users define their own customized shortcut keys in the web application?

I'm working on a web application built with Angular 7.0 and Node.js. I'm looking to implement a shortcut engine similar to Microsoft Word, where users can customize or modify default shortcut keys for certain functions in the app. Are there any c ...