How To Get Cookie In Angular

Cookies are small packages of information that can be temporarily stored by your browser and websites which are using cookies for multiple things. ngx cookie service is angular service to read, set and delete browser cookies. it is based on the ng2-cookies library.

In order to get cookies in Angular, we need to follow below steps :

• Step – 1

In order to get cookies in Angular, we need to install the Angular cookie-service using following npm :

ngx-cookie-service

• Step – 2

In app.component.ts 

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

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

  cookieValue = ''
  constructor(public cookieService: CookieService) {
    this.cookieService.set('X-Auth-Token', uuidv4());
    this.cookieValue = this.cookieService.get('X-Auth-Token');
  }
}

• Step – 3

In app.component.html 

<h3>Get Cookie:</h3>
<p>{{cookieValue}}</p>

• Step – 4

Now our code is ready to run. Output :