{"id":15573022,"url":"https://github.com/salemdar/ngx-cookie","last_synced_at":"2025-05-15T17:03:52.187Z","repository":{"id":18180247,"uuid":"83677943","full_name":"salemdar/ngx-cookie","owner":"salemdar","description":"Implementation of Angular 1.x $cookies service to Angular 2","archived":false,"fork":false,"pushed_at":"2023-10-03T06:16:00.000Z","size":2620,"stargazers_count":317,"open_issues_count":26,"forks_count":69,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-07T22:03:29.667Z","etag":null,"topics":["angular","angular2-cookie","cookie"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/salemdar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-02T12:57:43.000Z","updated_at":"2025-05-07T05:20:04.000Z","dependencies_parsed_at":"2024-06-18T12:23:31.324Z","dependency_job_id":"7e1ece5c-01fc-436a-8412-e0bb0deeda1f","html_url":"https://github.com/salemdar/ngx-cookie","commit_stats":{"total_commits":99,"total_committers":9,"mean_commits":11.0,"dds":0.2525252525252525,"last_synced_commit":"e0445b58162968de1816667a4d9b833a0efacf92"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salemdar%2Fngx-cookie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salemdar%2Fngx-cookie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salemdar%2Fngx-cookie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salemdar%2Fngx-cookie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/salemdar","download_url":"https://codeload.github.com/salemdar/ngx-cookie/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253082851,"owners_count":21851170,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2-cookie","cookie"],"created_at":"2024-10-02T18:09:55.357Z","updated_at":"2025-05-15T17:03:52.129Z","avatar_url":"https://github.com/salemdar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-cookie  [![CI](https://github.com/salemdar/ngx-cookie/workflows/CI/badge.svg)](https://github.com/salemdar/ngx-cookie/actions?query=workflow%3ACI) [![npm version](https://img.shields.io/npm/v/ngx-cookie.svg)](https://www.npmjs.com/package/ngx-cookie) [![Downloads](http://img.shields.io/npm/dm/ngx-cookie.svg)](https://npmjs.org/package/ngx-cookie) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/f34a6ed308934c168e7b31c99d2adb75)](https://app.codacy.com/gh/salemdar/ngx-cookie?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=salemdar/ngx-cookie\u0026utm_campaign=Badge_Grade) [![Codacy Badge](https://app.codacy.com/project/badge/Coverage/87ced3faf4104a8eb92b9b1939f12a54)](https://www.codacy.com/gh/salemdar/ngx-cookie/dashboard?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=salemdar/ngx-cookie\u0026utm_campaign=Badge_Coverage)\n\n\n\u003e Implementation of Angular 1.x $cookies service to Angular\n\n## Table of contents:\n- [Get Started](#get-started)\n  - [Installation](#installation)\n  - [Usage](#usage)\n  - [Server Side Rendering](#ssr)\n  - [Examples](#examples)\n- [CookieService](#cookieservice)\n  - [get()](#get)\n  - [getObject()](#getobject)\n  - [getAll()](#getall)\n  - [put()](#put)\n  - [putObject()](#putobject)\n  - [remove()](#remove)\n  - [removeAll()](#removeall)\n- [Options](#options)\n\n## \u003ca name=\"get-started\"\u003e\u003c/a\u003e Get Started\n\n### \u003ca name=\"installation\"\u003e\u003c/a\u003e Installation\n\nYou can install this package locally with npm.\n\n```bash\n# To get the latest stable version and update package.json file:\nyarn add ngx-cookie\n# or\n# npm install ngx-cookie --save\n```\n\n### \u003ca name=\"usage\"\u003e\u003c/a\u003e Usage\n\n`CookieModule` should be registered in an angular module with `withOptions()` static method.\nThese methods accept `CookieOptions` objects as well. Leave it blank for the defaults.\n\n```typescript\nimport { NgModule }      from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { CookieModule } from 'ngx-cookie';\n\nimport { AppComponent }  from './app.component';\n\n@NgModule({\n  imports: [ BrowserModule, CookieModule.withOptions() ],\n  declarations: [ AppComponent ],\n  bootstrap: [ AppComponent ]\n})\nexport class AppModule { }\n```\n\n```typescript\nimport { Component } from '@angular/core';\nimport { CookieService } from 'ngx-cookie';\n\n@Component({\n    selector: 'my-very-cool-app',\n    template: '\u003ch1\u003eMy Angular App with Cookies\u003c/h1\u003e'\n})\n\nexport class AppComponent { \n  constructor(private cookieService: CookieService){}\n  \n  getCookie(key: string){\n    return this.cookieService.get(key);\n  }\n}\n```\n\n### \u003ca name=\"ssr\"\u003e\u003c/a\u003e Server Side Rendering\n\n`ngx-cookie` supports usage during Server Side Rendering (SSR / Angular Universal). Getting Server Side Rendering itself set up the first time can be tricky and is outside the scope of this guide. Here, we'll assume that you've got a working SSR setup similar to the [Angular Universal Starter project](https://github.com/angular/universal-starter), and you're just trying to get `ngx-cookie` working with SSR.\n\nNote: during normal, client side usage, `ngx-cookie` manipulates the client cookies attached to the `document` object. During SSR, `ngx-cookie` will manipulate cookies in http request or response headers._\n\n#### Setup\n\nInstall `ngx-cookie-backend` library:\n```shell script\nyarn add ngx-cookie-backend\n# or\n# npm install ngx-cookie-backend --save\n```\n\nThen edit `app.server.module.ts` and add `CookieBackendModule.withOptions()` to imports:\n\n```typescript\n/* app.server.module.ts */\n\nimport { CookieBackendModule } from 'ngx-cookie-backend';\n\n@NgModule({\n  imports: [\n    AppModule,\n    ServerModule,\n    CookieBackendModule.withOptions()\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppServerModule {}\n```\nNext, we need to make providers for the `'REQUEST'` and `'RESPONSE'` objects created by the expressjs server during SSR. To do this, edit `server.ts` to create providers for `'REQUEST'` AND `'RESPONSE'`.\n\n```typescript\n/* server.ts */\nimport { REQUEST, RESPONSE } from '@nguniversal/express-engine/tokens';\n\n// All regular routes use the Universal engine\nserver.get('*', (req, res) =\u003e {\n  res.render(indexHtml, {\n    req,\n    res,\n    providers: [\n      {provide: APP_BASE_HREF, useValue: req.baseUrl},\n      {provide: REQUEST, useValue: req},\n      {provide: RESPONSE, useValue: res}\n    ]\n  });\n});\n```\n\nAnd that's it! all your application's calls to `CookieService` should now work properly during SSR!\n\n### \u003ca name=\"examples\"\u003e\u003c/a\u003e Examples\n\nNormal usage example is under `projects/test-app`\n\nSSR usage example is under `projects/backend-test-app`\n\n\n## \u003ca name=\"cookieservice\"\u003e\u003c/a\u003e CookieService\n\nThere are 7 methods available in the `CookieService` (6 standard methods from **Angular 1** and 1 extra `removeAll()` method for convenience)\n\n### \u003ca name=\"get\"\u003e\u003c/a\u003e get()\nReturns the value of given cookie key.\n\n```typescript\n/**\n * @param {string} key Id to use for lookup.\n * @returns {string} Raw cookie value.\n */\nget(key: string): string;\n```\n\n### \u003ca name=\"getobject\"\u003e\u003c/a\u003e getObject()\nReturns the deserialized value of given cookie key.\n\n```typescript\n/**\n * @param {string} key Id to use for lookup.\n * @returns {Object} Deserialized cookie value.\n */\ngetObject(key: string): Object;\n```\n\n### \u003ca name=\"getall\"\u003e\u003c/a\u003e getAll()\nReturns a key value object with all the cookies.\n\n```typescript\n/**\n * @returns {Object} All cookies\n */\ngetAll(): any;\n```\n\n### \u003ca name=\"put\"\u003e\u003c/a\u003e put()\nSets a value for given cookie key.\n\n```typescript\n/**\n * @param {string} key Id for the `value`.\n * @param {string} value Raw value to be stored.\n * @param {CookieOptions} options (Optional) Options object.\n */\nput(key: string, value: string, options?: CookieOptions): void;\n```\n\n### \u003ca name=\"putobject\"\u003e\u003c/a\u003e putObject()\nSerializes and sets a value for given cookie key.\n\n```typescript\n/**\n * @param {string} key Id for the `value`.\n * @param {Object} value Value to be stored.\n * @param {CookieOptions} options (Optional) Options object.\n */\nputObject(key: string, value: Object, options?: CookieOptions): void;\n```\n\n### \u003ca name=\"remove\"\u003e\u003c/a\u003e remove()\nRemove given cookie.\n\n```typescript\n/**\n * @param {string} key Id of the key-value pair to delete.\n * @param {CookieOptions} options (Optional) Options object.\n */\nremove(key: string, options?: CookieOptions): void;\n```\n\n### \u003ca name=\"removeall\"\u003e\u003c/a\u003e removeAll()\nRemove all cookies.\n\n```typescript\n/**\n */\nremoveAll(): void;\n```\n\n## \u003ca name=\"options\"\u003e\u003c/a\u003e Options\n\nOptions object should be a type of `CookieOptions` interface. The object may have following properties:\n\n- **path** - {string} - The cookie will be available only for this path and its sub-paths. By default, this is the URL that appears in your `\u003cbase\u003e` tag.\n- **domain** - {string} - The cookie will be available only for this domain and its sub-domains. For security reasons the user agent will not accept the cookie if the current domain is not a sub-domain of this domain or equal to it.\n- **expires** - {string|Date} - String of the form \"Wdy, DD Mon YYYY HH:MM:SS GMT\" or a Date object indicating the exact date/time this cookie will expire.\n- **secure** - {boolean} - If `true`, then the cookie will only be available through a secured connection.\n- **sameSite** - {\"Lax\"|\"Strict\"|\"None\"} - Designates cookie for first party (Lax|Strict) or third party contexts.\n- **httpOnly** - {boolean} - If `true`, then the cookie will be set with the `HttpOnly` flag, and will only be accessible from the remote server. Helps to prevent against XSS attacks.\n- **storeUnencoded** - {boolean} - If `true`, then the cookie value will not be encoded and will be stored as provided. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalemdar%2Fngx-cookie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsalemdar%2Fngx-cookie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalemdar%2Fngx-cookie/lists"}