How To Implement Cookies In Angular 16

Jump To Right Section Show

What is Cookies in Angular?

Cookies are small packages of information that can be temporarily stored/saved by your browser and websites that use cookies for multiple things. Cookies are used in multiple requests and browser sessions and can store your account information used by authentication for example.

How to install Cookies Dependency

We already have an NPM package for Angular called ‘ngx-cookie-service‘ that can be used for cookie use. Let’s install the cookies dependency using the below command:


npm install ngx-cookie-service

npm install ngx-cookie-service

After installing the cookies dependency, we have to import the CookieService inside one of our modules and add them as a provider. Please refer the below example code:


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [CookieService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({

declarations: [AppComponent],

imports: [BrowserModule],

providers: [CookieService],

bootstrap: [AppComponent]

})

export class AppModule { }

How to use Cookies in Angular

Now we will use our AppComponent and use the set, get, and delete method of the CookieService. In the below example code,


import { Component} from '@angular/core';
import {CookieService} from 'ngx-cookie-service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class AppComponent {
private cookie_name='';
private all_cookies:any='';

constructor(private cookieService:CookieService){
}

setCookie(){
  this.cookieService.set('name','Tutorialswebsite');
}

deleteCookie(){
  this.cookieService.delete('name');
}


deleteAll(){
  this.cookieService.deleteAll();
}

ngOnInit(): void {
this.cookie_name=this.cookieService.get('name');
this.all_cookies=this.cookieService.getAll();  // get all cookies object
    }
}

import { Component} from '@angular/core';

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

})

export class AppComponent {

private cookie_name='';

private all_cookies:any='';

constructor(private cookieService:CookieService){

}

setCookie(){

this.cookieService.set('name','Tutorialswebsite');

}

deleteCookie(){

this.cookieService.delete('name');

}

deleteAll(){

this.cookieService.deleteAll();

}

ngOnInit(): void {

this.cookie_name=this.cookieService.get('name');

this.all_cookies=this.cookieService.getAll(); // get all cookies object

}

we import the CookieService inside the app.component.ts file.


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

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

Next step, we will inject this service into the parameters of the constructor and set the private variable.


constructor( private cookieService: CookieService ) {

}

constructor( private cookieService: CookieService ) {

}

Set, get, and getAll Cookies

In the first line, we are using the set function to set the new cookie value with the name. In the second line, we are using the get function to get the cookie value with the cookie name.


this.cookieService.set('name','Tutorialswebsite'); // set the cookies value
this.cookie_name=this.cookieService.get('name');  // get the cookie value
this.all_cookies=this.cookie.getAll(); // get All cookies object

this.cookieService.set('name','Tutorialswebsite'); // set the cookies value

this.cookie_name=this.cookieService.get('name'); // get the cookie value

this.all_cookies=this.cookie.getAll(); // get All cookies object

Delete and Delete All Cookies

In the first line, we are using the delete function to delete the single cookie value with the name. In the second line, we are using the deleteAll function to delete all cookie values with a single click.


this.cookieService.delete('name'); // delete the single cookies value
this.cookieService.deleteAll();  // delete all the cookie value

this.cookieService.delete('name'); // delete the single cookies value

this.cookieService.deleteAll(); // delete all the cookie value

We use the below code to display the output in the browser and trigger the set Cookies, Delete, and Delete All functions.


<div style="text-align: center;" >
<h5>Cookies In Angular</h5>
<h5>Cookie Data:</h5>
<p>Name: {{cookie_name}}</p>
<p>Cookie Object: {{all_cookies | json}}</p>
<br>
<button (click)="setCookie()">Set Cookies</button>
<br><br>
<button (click)="deleteCookie()">Delete</button>
<br><br>
<button (click)="deleteAll()">Delete All</button>
</div>