{"id":13481521,"url":"https://github.com/salemdar/angular2-cookie","last_synced_at":"2025-10-07T06:31:38.174Z","repository":{"id":57179529,"uuid":"53853816","full_name":"salemdar/angular2-cookie","owner":"salemdar","description":"Implementation of Angular 1.x $cookies service to Angular 2","archived":true,"fork":false,"pushed_at":"2017-04-12T08:37:24.000Z","size":85,"stargazers_count":110,"open_issues_count":20,"forks_count":29,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-20T13:13:03.025Z","etag":null,"topics":["angular","cookie"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-14T12:18:57.000Z","updated_at":"2024-01-17T18:07:23.000Z","dependencies_parsed_at":"2022-09-10T22:40:14.795Z","dependency_job_id":null,"html_url":"https://github.com/salemdar/angular2-cookie","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salemdar%2Fangular2-cookie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salemdar%2Fangular2-cookie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salemdar%2Fangular2-cookie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salemdar%2Fangular2-cookie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/salemdar","download_url":"https://codeload.github.com/salemdar/angular2-cookie/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235600027,"owners_count":19016192,"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","cookie"],"created_at":"2024-07-31T17:00:52.497Z","updated_at":"2025-10-07T06:31:32.873Z","avatar_url":"https://github.com/salemdar.png","language":"JavaScript","readme":"# ~angular2-cookie~ _DEPRECATED_ =\u003e [ngx-cookie](https://github.com/salemdar/ngx-cookie) [![Build Status](https://travis-ci.org/salemdar/angular2-cookie.svg?branch=1.2.6)](https://travis-ci.org/salemdar/angular2-cookie) [![npm version](https://badge.fury.io/js/angular2-cookie.svg)](http://badge.fury.io/js/angular2-cookie) [![Downloads](http://img.shields.io/npm/dm/angular2-cookie.svg)](https://npmjs.org/package/angular2-cookie)\n\n## This library is deprecated and please use [ngx-cookie](https://github.com/salemdar/ngx-cookie) instead. ##\n\n\u003e Implementation of Angular 1.x $cookies service to Angular 2 **v1.2.6**\n\n_Please use \u003e=1.2.4 for Angular \u003e2.0.0, 1.1.x versions for beta, 1.2.2 version is for release candidates earlier than rc.5 and 1.2.3 is for \u003erc.5._\n\n## Table of contents:\n- [Get Started](#get-started)\n  - [Installation](#installation)\n  - [Usage](#usage)\n  - [Examples](#examples)\n    - [Angular2-quickstart](#quickstart)\n    - [Angular2-seed](#seed)\n    - [Angular-cli](#cli)\n    - [Angular2 Webpack Starter](#webstarterpack)\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:\nnpm install angular2-cookie --save\n```\n\nAfter installing the library, it should be included in the SystemJS configurations.\n\n```javascript\n/**\n * System configuration for Angular 2 samples\n * Adjust as necessary for your application needs.\n * Taken from: https://github.com/angular/quickstart/blob/master/systemjs.config.js\n */\n(function (global) {\n  System.config({\n    paths: {\n      // paths serve as alias\n      'npm:': 'node_modules/'\n    },\n    // map tells the System loader where to look for things\n    map: {\n      // our app is within the app folder\n      app: 'app',\n\n      // angular bundles\n      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',\n      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',\n      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',\n      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',\n      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',\n      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',\n      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',\n\n      // other libraries\n      'rxjs':                       'npm:rxjs',\n      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',\n      'angular2-cookie':            'npm:angular2-cookie'\n    },\n    // packages tells the System loader how to load when no filename and/or no extension\n    packages: {\n      app: {\n        main: './main.js',\n        defaultExtension: 'js'\n      },\n      rxjs: {\n        defaultExtension: 'js'\n      },\n      'angular2-in-memory-web-api': {\n        main: './index.js',\n        defaultExtension: 'js'\n      },\n      'angular2-cookie': {\n        main: './core.js',\n        defaultExtension: 'js'\n      }\n    }\n  });\n})(this);\n```\n\n### \u003ca name=\"usage\"\u003e\u003c/a\u003e Usage\n\n**CookieService** class is an injectable service with angular `@Injectable()` decorator. Therefore, it needs to be registered in the providers array (encouraged way).\nThen, it will be available in the constructor of the component class.\n\n```typescript\nimport { NgModule }      from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { CookieService } from 'angular2-cookie/services/cookies.service';\n\nimport { AppComponent }  from './app.component';\n\n@NgModule({\n  imports: [ BrowserModule ],\n  declarations: [ AppComponent ],\n  providers: [ CookieService ],\n  bootstrap: [ AppComponent ]\n})\nexport class AppModule { }\n```\n\n```typescript\nimport {Component} from 'angular2/core';\nimport {CookieService} from 'angular2-cookie/core';\n\n@Component({\n    selector: 'my-very-cool-app',\n    template: '\u003ch1\u003eMy Angular2 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=\"examples\"\u003e\u003c/a\u003e Universal Support\n\nThis module supports angular universal through angular service overrides, make sure you add something like\nthe following to your backend module instead of adding the CookieService provider\n\n```typescript\nimport { NgModule }      from '@angular/core';\nimport { UniversalModule } from 'angular2-universal';\n\nimport { CookieService } from 'angular2-cookie/services/cookies.service';\nimport { CookieBackendService } from 'angular2-cookie/services/cookies.backend.service';\n\nimport { AppComponent }  from './app.component';\n\n@NgModule({\n  imports: [ UniversalModule ],\n  declarations: [ AppComponent ],\n  providers: [\n  \t{\n      provide: CookieService,\n      useClass: CookieBackendService\n    }\n  ],\n  bootstrap: [ AppComponent ]\n})\nexport class AppModule { }\n```\n\n### \u003ca name=\"examples\"\u003e\u003c/a\u003e Examples\n\nHere you can find some usage examples with popular boilerplate libraries.\n\n#### \u003ca name=\"quickstart\"\u003e\u003c/a\u003e Angular2-quickstart\n\nA boilerplate provided by Angular team.\n_(Link: [https://github.com/angular/quickstart](https://github.com/angular/quickstart))_\n\nJust edit the `systemjs.config.js` file and add the `angular2-cookie` there.\n\n```typescript\n/**\n * System configuration for Angular 2 samples\n * Adjust as necessary for your application needs.\n */\n(function (global) {\n  System.config({\n    paths: {\n      // paths serve as alias\n      'npm:': 'node_modules/'\n    },\n    // map tells the System loader where to look for things\n    map: {\n      // our app is within the app folder\n      app: 'app',\n\n      // angular bundles\n      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',\n      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',\n      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',\n      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',\n      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',\n      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',\n      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',\n\n      // other libraries\n      'rxjs':                       'npm:rxjs',\n      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',\n      'angular2-cookie':            'npm:angular2-cookie'\n    },\n    // packages tells the System loader how to load when no filename and/or no extension\n    packages: {\n      app: {\n        main: './main.js',\n        defaultExtension: 'js'\n      },\n      rxjs: {\n        defaultExtension: 'js'\n      },\n      'angular2-in-memory-web-api': {\n        main: './index.js',\n        defaultExtension: 'js'\n      },\n      'angular2-cookie': {\n        main: './core.js',\n        defaultExtension: 'js'\n      }\n    }\n  });\n})(this);\n```\n\n#### \u003ca name=\"seed\"\u003e\u003c/a\u003e Angular2-seed\n\nA popular seed project.\n_(Link: [https://github.com/mgechev/angular2-seed](https://github.com/mgechev/angular2-seed))_\n\nAdd the following settings to the (constructor of) `ProjectConfig` class (path: `./tools/config/project.config.ts`).\n\n```typescript\n/* Add to or override NPM module configurations: */\n//this.mergeObject( this.PLUGIN_CONFIGS['browser-sync'], { ghostMode: false } );\nthis.mergeObject(this.SYSTEM_CONFIG_DEV['paths'], {'angular2-cookie': 'node_modules/angular2-cookie/bundles/angular2-cookie.js'});\nthis.mergeObject(this.SYSTEM_BUILDER_CONFIG['packages'], {\n  'angular2-cookie': {\n    main: 'core.js',\n    defaultExtension: 'js'\n  }\n});\n```\n\nDo not forget to inject the service in the module (`providers` array).\n\n#### \u003ca name=\"cli\"\u003e\u003c/a\u003e Angular-cli\n\nA CLI tool for Angular2.\n_(Link: [https://github.com/angular/angular-cli](https://github.com/angular/angular-cli))_\n\nEdit the `vendorNpmFiles` array (path: `./angular-cli-build.js`).\n\n```javascript\n// Angular-CLI build configuration\n// This file lists all the node_modules files that will be used in a build\n// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs\n\n/* global require, module */\n\nvar Angular2App = require('angular-cli/lib/broccoli/angular2-app');\n\nmodule.exports = function(defaults) {\n  return new Angular2App(defaults, {\n    vendorNpmFiles: [\n      'systemjs/dist/system-polyfills.js',\n      'systemjs/dist/system.src.js',\n      'zone.js/dist/**/*.+(js|js.map)',\n      'es6-shim/es6-shim.js',\n      'reflect-metadata/**/*.+(ts|js|js.map)',\n      'rxjs/**/*.+(js|js.map)',\n      '@angular/**/*.+(js|js.map)',\n      'angular2-cookie/**/*.+(js|js.map)'\n    ]\n  });\n};\n```\n\nAlso add `angular2-cookie` to the `map` and `packages` object in the `system-config.ts` (path: `./src/system-config.ts`)\n\n```typescript\n/***********************************************************************************************\n * User Configuration.\n **********************************************************************************************/\n/** Map relative paths to URLs. */\nconst map: any = {\n  'angular2-cookie': 'vendor/angular2-cookie'\n};\n\n/** User packages configuration. */\nconst packages: any = {\n  'angular2-cookie': {main: 'core.js', defaultExtension: 'js'},\n};\n```\n\n#### \u003ca name=\"webstarterpack\"\u003e\u003c/a\u003e Angular2 Webpack Starter\n\nAn Angular 2 Starter kit featuring Angular 2 and Webpack 2 by @AngularClass\n_(Link: [https://github.com/AngularClass/angular2-webpack-starter](https://github.com/AngularClass/angular2-webpack-starter))_\n\nAdd angular2-cookie to `vendor.browser.ts` (path: `./src/vendor.browser.ts`)\n\n```typescript\n// Angular 2\nimport '@angular/platform-browser';\nimport '@angular/platform-browser-dynamic';\nimport '@angular/core';\nimport '@angular/common';\nimport '@angular/forms';\nimport '@angular/http';\nimport '@angular/router';\n\n// angular2 cookie\nimport 'angular2-cookie/core'\n\n// AngularClass\nimport '@angularclass/hmr';\n\n// RxJS\nimport 'rxjs/add/operator/map';\nimport 'rxjs/add/operator/mergeMap';\n\nif ('production' === ENV) {\n  // Production\n\n\n} else {\n  // Development\n\n}\n\n```\n\nAdd `CookieService` to the `APP_PROVIDERS` array in the `app.module.ts` file (path: `./src/app/app.module.ts`):\n\n```typescript\n// ...\n\n// Application wide providers\nconst APP_PROVIDERS = [\n  ...APP_RESOLVER_PROVIDERS,\n  AppState,\n  CookieService\n];\n\n// ...\n```\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 {CookieOptionsArgs} options (Optional) Options object.\n */\nput(key: string, value: string, options?: CookieOptionsArgs): 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 {CookieOptionsArgs} options (Optional) Options object.\n */\nputObject(key: string, value: Object, options?: CookieOptionsArgs): 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 {CookieOptionsArgs} options (Optional) Options object.\n */\nremove(key: string, options?: CookieOptionsArgs): 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 `CookieOptionsArgs` 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\n\n### \u003ca name=\"notes\"\u003e\u003c/a\u003e _Note_\n\n_The build process and the file structure of this repository has respectively modeled after the awesome [angular2-google-maps](https://github.com/SebastianM/angular2-google-maps) project of [Sebastian Müller](http://twitter.com/Sebamueller)._\n","funding_links":[],"categories":["Uncategorized","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalemdar%2Fangular2-cookie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsalemdar%2Fangular2-cookie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalemdar%2Fangular2-cookie/lists"}