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
Implementation of Angular 1.x $cookies service to Angular 2
We found that angular2-cookie demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.