Skip to main content

Install cookies in Angular

How to install a cookie in Angular?
Install cookie -

npm install ngx-cookie-service –save

If you do not want to install this via NPM, you can run npm run compile and use the *.d.ts and *.js files in the dist-lib folder.

After installed successfully, add the cookie service in the Angular module - app.module.ts
import {CookieService} from 'ngx-cookie-service'

//AppModule class with @NgModule decorator
@NgModule({
  //Static, this is the compiler configuration
  //declarations is used for configure the selectors.
  declarations: [
    AppComponent
],
  //Composability and Grouping
  //imports used for composing NgModules together.
  imports: [
    BrowserModule
  ], 
  //Runtime or injector configuration
  //providers is used for runtime injector configuration.
  providers: [CookieService],
  //bootstrapped entry component
  bootstrap: [AppComponent]
})
export class AppModule { }


Then, import and inject it into a component -
import { Component, OnInit } from '@angular/core';
import {CookieService} from 'ngx-cookie-service'

@Component({
  selector: 'app-on-click',
  templateUrl: './on-click.component.html',
  styleUrls: ['./on-click.component.css']
})
export class OnClickComponent implements OnInit {

  cookieValue ="";
  constructor(private cookie:CookieService) {  }

  ngOnInit() {
    this.cookie.set('cookie', 'demoApp' );
    this.cookieValue = this.cookie.get('cookie');
  }
}

Labels: