How to Set Cookie Service in Angular 4+ Applications

Updated on: May 27, 2021

In Angular we can use Browser Cookies to store Logged In User Information or Application related data, follow the below steps to Install Cookie Service in Angular application and know how to use it in your application:

Step 1: Run the following command to install Angular Cookies Service to use in your Angular 4,6,8+ application

npm install ngx-cookie-service --save

Step 2: Once above command adds the Cookie Service package in your existing Angular application, then you need to add it in your app.module.ts file in providers list as shown below:

providers: [CookieService],

Also, verify that app.module.ts file has following import statement added:

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

Step 3: Once you add the above configuration, you can use Cookies Service anywhere in your Angular Application, you just need to add above import statement in the file where you want to use Cookies, and use the following methods of Cookies Service:

  • check
  • delete
  • deleteAll
  • get
  • getAll
  • set

You can test the cookies functionality from the browser and check whether cookies have been set properly from your chrome browser:

Chrome Browser => Settings => Advanced => Site Settings => Cookies and site data => See all cookies and site data => Click on domain name and see the cookies name, content, expiry is set properly or not.