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');
}
}