angular2-cookie
Advanced tools
Implementation of Angular 1.x $cookies service to Angular 2 v1.1.1
You can install this package locally with npm.
# To get the latest stable version and update package.json file:
npm install angular2-cookie --save
After installing the library, you should include it in the index.html file.
<head>
<base href="/">
<title>My Very Cool App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- Include angular2-cookie library -->
<script src="node_modules/angular2-cookie/bundles/angular2-cookie.min.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
"app": {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
CookieService class is an injectable service with angular @Injectable() decorator. Therefore, it needs to be registered in the providers array (encouraged way).
Then, it will be available in the constructor of the component class.
import {Component} from 'angular2/core';
import {CookieService} from 'angular2-cookie/core';
@Component({
selector: 'my-very-cool-app',
template: '<h1>My Angular2 App with Cookies</h1>',
providers: [CookieService]
})
export class AppComponent {
constructor(private _cookieService:CookieService){}
getCookie(key: string){
return this._cookieService.get(key);
}
}
There are 7 methods available in the CookieService (6 standard methods from Angular 1 and 1 extra removeAll() method for convenience)
Returns the value of given cookie key.
/**
* @param {string} key Id to use for lookup.
* @returns {string} Raw cookie value.
*/
get(key: string): string;
Returns the deserialized value of given cookie key.
/**
* @param {string} key Id to use for lookup.
* @returns {Object} Deserialized cookie value.
*/
getObject(key: string): Object;
Returns a key value object with all the cookies.
/**
* @returns {Object} All cookies
*/
getAll(): any;
Sets a value for given cookie key.
/**
* @param {string} key Id for the `value`.
* @param {string} value Raw value to be stored.
* @param {CookieOptionsArgs} options (Optional) Options object.
*/
put(key: string, value: string, options?: CookieOptionsArgs): void;
Serializes and sets a value for given cookie key.
/**
* @param {string} key Id for the `value`.
* @param {Object} value Value to be stored.
* @param {CookieOptionsArgs} options (Optional) Options object.
*/
putObject(key: string, value: Object, options?: CookieOptionsArgs): void;
Remove given cookie.
/**
* @param {string} key Id of the key-value pair to delete.
* @param {CookieOptionsArgs} options (Optional) Options object.
*/
remove(key: string, options?: CookieOptionsArgs): void;
Remove all cookies.
/**
*/
removeAll(): void;
Options object should be a type of CookieOptionsArgs interface. The object may have following properties:
<base> tag.true, then the cookie will only be available through a secured connection.CookieService can use ANGULAR2_COOKIES_PROVIDERS to provide default options. Thus the default options can be altered by overriding the necessary class.
See Angular dependency injection guide for more information on the topic.
import {provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {App} from './myapp';
class MyOptions extends BaseCookieOptions {
path: string = '/my/path/';
}
bootstrap(App, [ANGULAR2_COOKIES_PROVIDERS, provide(CookieOptions, {useClass: MyOptions})]);
The build process and the file structure of this repository has respectively modeled after the awesome angular2-google-maps project of Sebastian Müller.
FAQs
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.