Angular url plus sign converting to space

Question

I have angular application where i want to pass plus sign + in query string like:

http://localhost:3000/page?name=xyz+manwal 

When I am hitting this URL its converting to:

http://localhost:3000/page?name=xyz%20manwal 

Where %20 refer to space . How can I prevent this conversion?

Answer 1

You can override default angular encoding with adding Interceptor which fixes this:

import { HttpInterceptor, HttpRequest, HttpEvent, HttpHandler, HttpParams, HttpParameterCodec } from "@angular/common/http"; import { Injectable } from "@angular/core"; import { Observable } from "rxjs";  @Injectable() export class EncodeHttpParamsInterceptor implements HttpInterceptor {   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {     const params = new HttpParams({encoder: new CustomEncoder(), fromString: req.params.toString()});     return next.handle(req.clone({params}));   } }   class CustomEncoder implements HttpParameterCodec {   encodeKey(key: string): string {     return encodeURIComponent(key);   }    encodeValue(value: string): string {     return encodeURIComponent(value);   }    decodeKey(key: string): string {     return decodeURIComponent(key);   }    decodeValue(value: string): string {     return decodeURIComponent(value);   } } 

and declare it in providers section of in app.module.ts

providers: [     {       provide: HTTP_INTERCEPTORS,       useClass: EncodeHttpParamsInterceptor,       multi: true     } ] 

Answer 2

This ia a common problem. The + character is used by the URL to separate two words. In order to use the + character in the parameter values, you need to encode your parameter values before adding them as part of the URL. Javascript / TypeScript provide a encodeURI() function for that specific purpose.

URL encoding converts characters into a format that can be transmitted over the Internet. [w3Schools Reference]

Here is how you can fix this problem:

let encodedName = encodeURI('xyz+manwal'); let encodedURI = 'http://localhost:3000/page?name='+encodedName;  //.. OR using string interpolation let encodedURI = `http://localhost:3000/page?name=${ encodedName }`; 

In the same way, you can decode the parameters using decodeURI() method.

let decodedValue = decodeURI(encodedValue);