When employing `queryParams` in Angular routing, the URL will automatically replace `%` with `%25`

When trying to use queryParams for navigation in Angular routing, I encountered an issue.

<a routerLink='/master' [queryParams]="{query:'%US',mode:'text'}"><li (click)="search()">Search</li></a>

The desired URL to navigate to was:

http://localhost:4200/master?query=%US&mode=text

However, upon clicking on search, the actual navigated URL turned out to be:

http://localhost:4200/master?query=%25US&mode=text

I am unsure why the extra 25 is added after the % symbol. Any suggestions on a cleaner way to navigate correctly would be appreciated.

javascriptangulartypescriptroutesangular4-router

Answer №1

When it comes to URLs, the percent sign serves a special purpose by encoding special characters. For instance, = becomes %3D when encoded.

Some special characters are not permitted in URLs. If you need to include them in a URL, you must encode them using the encodeURIComponent JavaScript function. %25 represents the encoded version of the % character, with browsers handling the encoding automatically.

If you need to retrieve query parameters from a URL, you can decode them using decodeURIComponent.

To find out more, visit: https://support.microsoft.com/en-in/help/969869/certain-special-characters-are-not-allowed-in-the-url-entered-into-the

For additional information, see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent

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

Arranging JSON array in Angular 6 by specific key within the nested array

Is there a way to sort the data object based on the order numbers inside the array objects? data =[ { name:'' list:{ order :2 }, { name:'' list:{ order :1 } ] ...

angularsorting

Customizing CSS for displayed MDBootrap components

I am currently using MDBoostrap, a styling tool similar to Bootstrap, in my React application. I have a select element that is coded like so: <div> <select id="Regions" style={errorSelect} value={this.state.userRegionId} onChange={this.handle ...

javascripthtmlcssreactjsmdbootstrap

shortcut taken in inferring now exported

When using a default export, if the expression consists only of a variable identifier, the type inferencer defaults to the declaration of the variable instead of the actual type of the expression. Is this behavior intentional or is it a bug? // b.ts const ...

typescript

Leverage OpenID Connect in Azure Active Directory with authentication code flow

Currently, I am developing an authentication system for a NodeJS and Express web application that requires users to be directed to Microsoft SSO. To achieve this, I am utilizing passport-azure-ad and OpenID Connect. My main query is - Is it mandatory to ...

javascriptexpressazure-active-directoryopenid-connectpassport-azure-ad

Enhance the appearance of your Vuejs application with conditional style formatting

I want to enhance a basic table by applying conditional CSS styles to the cells based on their values. For example: If area1 == 'one', then assign the td-one CSS style. <tr v-for="version in versions" :key="version.id"> < ...

javascripthtmlcssvue.jsvuejs2

Tips for alternating the color of <li> or <tr> elements consecutively

Looking to alternate the background color of li or tr elements consecutively. Please note: A static class will not work as I need to call this in a while loop. The desired output should look like: <li>line1</li> //white background <li> ...

javascriptphpjqueryhtmlcss

How can I perform a cross-domain XMLHTTPREQUEST to communicate with an FTP server using the appropriate syntax?

I am currently using a webDav CORS plugin to manage files on a webDav server through POST/PUT/GET/REMOVE/ALLDOCS requests. Now, I am attempting to achieve the same functionality for FTP but am facing difficulties with the xmlhttprequest syntax (I keep rec ...

javascriptajaxftpxmlhttprequestcross-domain

Each Vue instance on the page has its own isolated Vuex store

I have a situation where I am creating multiple Vue apps on the same page: import Vue from "vue"; import App from "./App.vue"; import useStore from "./store"; const arr = [1, 2]; for (const index of arr) { const store = use ...

javascriptvue.jsvuejs2vuex

The element is inferred to have an 'any' type due to the inability to use a 'string' type expression to index the 'Palette' type

Encountering an issue: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Palette'. No index signature with a parameter of type 'string' was found on type &ap ...

reactjstypescriptmaterial-ui

The makeSVG function from GoJS is failing to generate the correct HTML SVG object

I have been utilizing the Diagram.makeSVG() method to create an SVG from my diagram. Subsequently, I appended the SVG to a new empty tab using this script (diagram represents my Diagram Object): function print() { var newTab = window.open(), svg ...

javascripthtmlinternet-explorersvggojs

How to retain the side menu icon in Ionic 2 even after navigating using navCtrl push

Whenever I navigate to a new page using navCtrl.push, the sidemenu icon (hamburger) disappears and is replaced by a back button instead of coexisting with it. What I am aiming for is to retain the sidemenu icon by positioning it on the right side of the i ...

angularionic2

Unable to view images that have been uploaded through express.js

In my current project with a REST Api, I have been facing an issue while uploading images. The folder structure of the project can be seen here: https://i.sstatic.net/1PN0q.png Under the public folder, there is a subfolder named images where all the image ...

javascriptnode.jsimagerestexpress

The function fs.createReadStream does not exist

Snippet to Submit Career Form: import axios from 'axios'; import FormData from 'form-data'; var fs = require('fs'); submitCareerForm(e){ e.preventDefault(); let formData = new FormData(); //formdata obje ...

javascriptnode.jsreactjsfs

Issue: Module 'serialize-javascript' not found despite being present in the 'node_modules' directory after executing npm start command in ReactJS project

My npm start suddenly stopped working. This issue arose after I switched to an unused branch with unrelated histories, made some changes, pushed them (unaware that the branch was outdated), then used git checkout -f "" to go back to the recent br ...

javascriptnode.jsreactjsnpmwebpack

Javascript code generated by PHP is failing to run

When you select an option from the dropdown below: <select id='dropdown' name='dropdown' onchange='showChart(this.value)'> <option value="1">Foo</value> <option value="2">Bar</value> </select& ...

phpjavascriptajax

JavaScript encountered an issue: Uncaught ReferenceError - 'userNumber' is undefined at line 43

I'm currently working on a JavaScript guessing game where I've already set up the necessary functions. However, I keep encountering an error. An error in my JavaScript code is causing a ReferenceError: userNumber is not defined on line 43 to b ...

jqueryreferencejavascript

Issue with undefined object in ExpressJS PUT method

Attempting to utilize the PUT method for updating a record in my database, I encountered an issue with the object not being defined. ReferenceError: blogpost is not defined Following this tutorial for routing steps, I noticed that while the variable is d ...

javascriptnode.jsexpressroutes

What is the process of importing a JSON data file and utilizing it within a React component?

As a beginner in React, I am struggling with the concepts of importing, exporting, and rendering components. I have a fakeData.json file within the same src/components folder as the component I want to render. Let's take a look at the structure: < ...

javascriptjsonreactjs

Disable the ng-change event

Is there a way to prevent the ng-change event from happening? I have a select box with an option that I don't want users to select. Instead, I want to display a warning message and then revert back to the previously selected option. To achieve this, ...

javascriptjqueryangularjs

Is there a way for me to instruct jQuery to revert an element back to its initial value, prior to any dynamic alterations?

My question is regarding changing the content of a div using the `html()` method in JavaScript. I am currently working on implementing a "cancel" button and would like to revert the content back to its original value without having to completely reset it w ...

javascriptjqueryhtml