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

app.component.html

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

<h2>
  <a href="https://angular-ivy-1lrgdt.stackblitz.io/" target="_blank">Click here to see the Cookie</a>
</h2>
<p>
  Get Cookie: {{cookieValue}}
</p>

app.component.ts

import { Component, VERSION } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';
import { v4 as uuidv4 } from 'uuid';
@Component({
  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');
  }
}

Furqan

Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.