How to Pass x-www-form-urlencoded Data in Angular?

To specify the type or format of the data that is being sent over an HTTP request, we use the Content-Type header.

In simpler terms, the Content-Type header helps the server (or the client) understand what kind of data is being sent or received so that it can handle the data appropriately.

There are various different types of Content-Type headers available such as application/json, application/xml, application/text etc. to send JSON, XML, and Text format data.

One of such Content-Type is application/x-www-form-urlencoded. This format is used to send data as URL-encoded key-value pairs, similar to HTML form submissions. The data is serialized into a string with key-value pairs separated by ‘&’, and keys and values are URL-encoded.

In Angular, you can use the URLSearchParams() class to make an instance of the application/x-www-form-urlencoded Content-Type and then use the set() method on this instance to add the encoded parameters and their values.

See the following example:

    // Create an instance of URLSearchParams()
    const encodedBody = new URLSearchParams();

    // Add key and value pairs to the above instance
    encodedBody.set('username', 'johndoe123');
    encodedBody.set('email', 'johndoe@gmail.com');
    
    // Specify the Content-Type
    const headers = new HttpHeaders({
      'Content-Type': 'application/x-www-form-urlencoded',
    });

    // Create headers object
    const httpOptions = { headers: headers};

    // Call the API
    this.http.post(url, encodedBody, httpOptions);

You can add as many keys as you want to the URLSearchParams() object and send it over the HTTP request.

You can also check if the data passed is encoded or not by opening the developer tools in the browser:

That’s all for this article.

Thanks for reading!