How to set and get cookies in angular using package ?

In our last article we have covered how to use set and get cookies using a service in angular and in this article i will show you to set and get cookie using package. Cookies are used to store the data in client computer, Cookie can hold tiny information in computer and can retrieve when required for same website.

Cookies can store key value in client system and its send back the cookies with every request so server can identify the user or session.

Why cookies are useful ?

Cookies are very useful for every website because without cookies server will unable to maintain the session for a request response. For example when we make a request to a website server, server sent response to user and the close the connection so here for next request server doesn’t know about the request is from same browser or client or it’s from different client. Therefore here cookies play the role to send some information by which server can identify it’s from same browser.

If you look at server side languages each language creates its own cookie to create the session as below

Screenshot 2022 04 14 at 8.18.44 AM — Cookies

In this tutorial we will learn to create cookies by Using the third party package of angular

So let’s start set and get cookies in angular in native javascript

Step 1 : Create an angular app

First step is to setup an angular app using below command

ng new example-app

Step 2: Install package ngx-cookie-service

Now simple install the package ngx-cookie-service using npm as below

npm install ngx-cookie-service --save

this will add ngx-cookie-service package to our project

Step 3: Inject service in module

Open file app.module.ts and add the Cookie service as below

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

@NgModule({
  ...
    providers:
[CookieService],
...
})

export class AppModule {
}

Step 3: Add components and inject service

Now, create two components one for set the cookie and other for get the cookie in different pages

ng g c SetCookieExample

This will create a folder in app directory named with set-cookie-example and here is component file

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

@Component({
  selector: 'app-set-cookie-example',
  templateUrl: './set-cookie-example.component.html',
  styleUrls: ['./set-cookie-example.component.css'],
})
export class SetCookieExampleComponent implements OnInit {
  constructor(public cookie: CookieService) {}

  ngOnInit() {
    this.cookie.set('user', 'Readerstacks', 2, '/', null, null, 'Lax');
  }
}

here we injected the Cookie service and then set user cookie in browser

this.cookie.set('user', 'Readerstacks', 2, '/', null, null, 'Lax');

Html to link to another page

<p>We have set cookies on this page</p>
<a routerLink="get-cookie">Get cookie another page</a>

Create another component to get the cookies

ng g c GetCookieExample

This will create a folder in app directory named with get-cookie-example and here is component file

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

@Component({
  selector: 'app-get-cookie-example',
  templateUrl: './get-cookie-example.component.html',
  styleUrls: ['./get-cookie-example.component.css'],
})
export class GetCookieExampleComponent implements OnInit {
  user: string;

  constructor(public cookie: CookieService) {}

  ngOnInit() {
    this.user = this.cookie.get('user');
  }
}

we fetched the stored value in cookie using this.user = this.cookie.get('user');

Html to display name

<p>Getting cookie on this page</p>
User : {{ user }}

Step 4: Add routes in app routing

Finally add the routes in app.routing.module.ts to test the implementation

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SetCookieExampleComponent } from './set-cookie-example/set-cookie-example.component';
import { GetCookieExampleComponent } from './get-cookie-example/get-cookie-example.component';
import { CookieService } from './cookie.service';

@NgModule({
  declarations: [SetCookieExampleComponent, GetCookieExampleComponent],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', component: SetCookieExampleComponent },
      { path: 'get-cookie', component: GetCookieExampleComponent },
    ]),
  ],
  exports: [RouterModule],
  providers: [CookieService],
})
export class AppRoutingModule {}

Run the application and check implementation