How to stop converting + symbols into space in Angular

Question

searchItem Contain some value like abc+def. when i am checking in backend its going like (abc def). how to fixed .+(plus sign convert into space)

search(searchItem: string): Promise<any> {
    let params = new HttpParams();
    params = params.append('searchItem', searchItem);
    return new Promise((resolve, reject) => {
        // use For Testing
        this.httpClient.get(this.urlService.getApiUrl() + 'test/item',
                {
                    params: params
                })
        .subscribe(data => {
            resolve(data);
        }, error => {
            console.log('Error: ' + JSON.stringify(error));
            reject(error);
        });
    });
}

Possible duplicate of [Angular url plus sign converting to space](https://stackoverflow.com/questions/45428842/angular-url-plus-sign-converting-to-space) — TheParam, Mar 09 '19 at 04:47

score 0 · Answer 1 · answered Mar 09 '19 at 04:49

0

You just need to call encodeURIComponent() method before set param.

...
params = params.append('searchItem', encodeURIComponent(searchItem));
...

answered Mar 09 '19 at 04:49

zmag

7,825
12
32
42

yeah i already use encodeURI() and encodeURIComponent() no one is working .Still printing ABC%2BDEF – Bharat Kumar Mar 09 '19 at 05:02
That is working correctly. You have to decode it in your back-end app. – zmag Mar 09 '19 at 05:23
I am using spring JPA .can you tell me where i have to decode – Bharat Kumar Mar 09 '19 at 06:08

score 0 · Answer 2 · answered Jul 26 '19 at 15:16

Use a custom encoder for HttpParams to fix this.

import { HttpParameterCodec } from '@angular/common/http';

export 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 then in your search() function,

let params = new HttpParams({encoder: new CustomEncoder()});

How to stop converting + symbols into space in Angular

2 Answers2