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.

Differentiate between declaration, provider and imports in the NgModule?Example

In Angular, NgModule is a fundamental concept that helps organize and configure various artifacts in an application. It is important to understand the differences between declaration, provider, and import within NgModule. In this article, we will explore these concepts and provide examples with their corresponding outputs.

1. Declaration

The declaration property in NgModule is used to specify the components, directives, and pipes that belong to the module. By declaring these artifacts, we make them available for use within the module or by other modules that import it.

Example:

typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my-component.component';
import { MyDirective } from './my-directive.directive';
import { MyPipe } from './my-pipe.pipe';

@NgModule({
  declarations: [
    MyComponent,
    MyDirective,
    MyPipe
  ],
  imports: [
    CommonModule
  ]
})
export class MyModule { }

In this example, the `declarations` array includes MyComponent, MyDirective, and MyPipe. These artifacts are part of the MyModule NgModule and can be used within this module or by other modules that import MyModule.

2. Provider

The provider property in NgModule is used to configure dependency injection for the module. It allows us to specify services or other providers that should be available for injection throughout the application.

Example:

typescript
import { NgModule } from '@angular/core';
import { MyService } from './my-service.service';

@NgModule({
  providers: [
    MyService
  ]
})
export class MyModule { }

In this example, the `providers` array includes MyService. By including it in the providers array, MyService becomes available for injection throughout the module and its components. This ensures that instances of MyService can be accessed and used by other components within the module.

3. Imports

The imports property in NgModule is used to import other modules into the current module. This allows us to access and use the exported artifacts from the imported modules within the current module.

Example:

typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { SharedModule } from '../shared/shared.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    SharedModule
  ]
})
export class MyModule { }

In this example, the `imports` array includes CommonModule, FormsModule, and SharedModule. By importing these modules, the components, directives, pipes, and services defined in those modules become accessible within the current module (MyModule).

Conclusion:

Understanding the differences between declaration, provider, and import within NgModule is essential for building Angular applications. The declarations property is used to declare components, directives, and pipes within the module. The providers property is used to configure dependency injection by specifying services and providers. The imports property is used to import other modules, allowing access to their exported artifacts. By effectively utilizing these concepts, we can organize and configure Angular modules to create robust and modular applications.