Angular 13 ngx-cookie-service Generate Random Cookie & X-Auth Token

In this tutorial, I’ll give you an example of how to use TypeScript and Angular 13 ngx-cookie-service to generate a random cookie and X-Auth token inside the browser.

ng new sampleapp
cd sampleapp
npm i ngx-cookie-service


  Successfully set randomly generated cookie <b>X-Auth-Token</b>

  <a href="" target="_blank">Click here to see the Cookie</a>
  Get Cookie: {{cookieValue}}


import { Component, VERSION } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';
import { v4 as uuidv4 } from 'uuid';
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  cookieValue = '';
  constructor(public cookieService: CookieService) {
    this.cookieService.set('X-Auth-Token', uuidv4());
    this.cookieValue = this.cookieService.get('X-Auth-Token');

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.