How to set, get and clear cookies In Angular? Example

In Angular, handling cookies is a common task when working with web applications. Cookies are small pieces of data stored on the client-side, often used for tracking user preferences or maintaining session information. This article will guide you through the process of setting, getting, and clearing cookies in Angular, and providing some code examples.

1. Setting Cookies

You can set a cookie using the `cookie.set` method provided by the ngx-cookie-service library. The ngx-cookie-service library offers convenient functions to work with cookies in Angular applications. Let's explore an example of setting a cookie using this approach.

Example:

typescript
import { CookieService } from 'ngx-cookie-service';

// Inject the CookieService into your component
constructor(private cookieService: CookieService) { }

// Set a cookie
this.cookieService.set('nameOfCookie', 'cookieValue');

In the example above, we start by importing the CookieService from the 'ngx-cookie-service' package. Then, in the component's constructor, we inject an instance of the CookieService.

To set a cookie, we call the set method on the cookieService object. The set method takes two parameters: the name of the cookie ('nameOfCookie' in this case) and its value ('cookieValue' in this case). The cookie will be stored on the client-side with the provided name and value.

2. Getting Cookies

You can retrieve the value of a cookie using the get method provided by the ngx-cookie-service library. This method allows you to retrieve the value of a specific cookie by providing its name. Here's an example of how to get a cookie using this approach.

Example:

typescript
import { CookieService } from 'ngx-cookie-service';

// Inject the CookieService into your component
constructor(private cookieService: CookieService) { }

// Get the value of a cookie
const cookieValue = this.cookieService.get('nameOfCookie');
console.log(cookieValue); // Output: The value of the cookie

To retrieve the value of a cookie, we call the get method on the cookieService object and provide the name of the cookie as a parameter. In this case, the cookie's name is 'nameOfCookie'. The method returns the value of the cookie, which can be stored in a variable for further use.

In the example, we store the retrieved cookie value in the cookieValue variable and log it to the console using console.log(). You can replace this with your desired logic to handle the cookie value.

3.Clearing Cookies

You can remove a cookie by using the delete method provided by the ngx-cookie-service library. The delete method allows you to remove a specific cookie by providing its name. Let's take a look at an example of how to clear a cookie using this approach.

Example:

typescript
import { CookieService } from 'ngx-cookie-service';

// Inject the CookieService into your component
constructor(private cookieService: CookieService) { }

// Clear a cookie
this.cookieService.delete('nameOfCookie');

In this example, we import the CookieService from the ngx-cookie-service package. Then, in the component's constructor, we inject an instance of the CookieService to access its methods.

To clear a cookie, we call the delete method on the cookieService object and pass the name of the cookie ('nameOfCookie' in this case) as the parameter. This will remove the cookie from the client-side storage.

Note : Make sure to install the ngx-cookie-service library by running npm install ngx-cookie-service before using it in your Angular project. Also, adjust the import statement and constructor accordingly based on your project's configuration.

Conslusion :

Managing cookies in Angular is a common requirement when developing web applications. In this article, we explored how to set, get, and clear cookies using the ngx-cookie-service library. By leveraging the library's methods, we can easily perform these cookie-related operations.

To set a cookie, we used the set method provided by the CookieService. We provided the cookie's name, value, and optionally, the expiration date. This allowed us to store the desired information on the client-side.

When it comes to retrieving a cookie, we utilized the get method of the CookieService. By providing the cookie's name as a parameter, we were able to obtain its value and use it within our application.

To clear a cookie, we made use of the delete method from the CookieService. By specifying the cookie's name, we removed it from the client-side storage, ensuring that it would no longer be accessible.