How To Pass x-www-form-urlencoded Data In Angular

The Code Points August 18, 2022 0

In this article, we will learn how to pass x-www-form-urlencoded data in angular using an example.

We have a variety of pre-defined Content-Types available for transmitting data in the request's body. Let's look at how to send data using application/x-www-form-urlencoded in angular typescript.

Let's first examine the requirement for application/x-www-form-urlencoded in data transmission.

It is necessary primarily to protect data transmission through networks. There is no security threat. This Content-Type is typically using throughout the form submission process. Therefore, all security issues related to HTML forms must be taken into account while using this Content-Type.

When multiple pieces of data are passed, they become key, values separated by a '&'.

Let's now examine the typescript method for passing data for the Content-Type application/x-www-form-urlencoded.

As shown below, We use the URLSearchParams() class in typescript.

let body = new URLSearchParams();
body.set("grant_type", "authorization_code");
body.set("code", this.code ?? "");
body.set("redirect_uri", "http://localhost:4200/oauth2code");

let headers = new HttpHeaders({
	"Content-Type': 'application/x-www-form-urlencoded' 
});

let options = { headers: headers };

this.http.post(
	this.tokenUrl, body,
	options
).subscribe((response: any) =>{
	this.router.navigate(['home']);
});

Conclusion

In this article, we learned how to pass x-www-form-urlencoded data in angular using an example.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in the comment section.