ngx-cookie
Implementation of Angular 1.x $cookies service to Angular. Successor of angular2-cookie
Table of contents:
Get Started
Installation
You can install this package locally with npm.
npm install ngx-cookie --save
After installing the library, it should be included in the SystemJS configurations.
(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
app: 'app',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'ngx-cookie': 'npm:ngx-cookie/bundles/ngx-cookie.umd.js'
},
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
Usage
CookieModule
should be registered in the AppModule
with forRoot()
static method and with forChild()
in the child modules.
These methods accepts CookieOptions
objects as well. Leave it blank for the defaults.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CookieModule } from 'ngx-cookie';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, CookieModule.forRoot() ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
import { Component } from '@angular/core';
import { CookieService } from 'ngx-cookie';
@Component({
selector: 'my-very-cool-app',
template: '<h1>My Angular2 App with Cookies</h1>'
})
export class AppComponent {
constructor(private _cookieService:CookieService){}
getCookie(key: string){
return this._cookieService.get(key);
}
}
Examples
Here you can find some usage examples with popular boilerplate libraries.
Angular2-quickstart
A boilerplate provided by Angular team.
(Link: https://github.com/angular/quickstart)
Just edit the systemjs.config.js
file and add the ngx-cookie
there.
(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
app: 'app',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'ngx-cookie': 'npm:ngx-cookie/bundles/ngx-cookie.umd.js'
},
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
Angular2-seed
A popular seed project.
(Link: https://github.com/mgechev/angular2-seed)
Add the following settings to the (constructor of) ProjectConfig
class (path: ./tools/config/project.config.ts
).
let additionalPackages: ExtendPackages[] = [{
name: 'ngx-cookie',
path: 'node_modules/ngx-cookie/bundles/ngx-cookie.umd.js'
}];
this.addPackagesBundles(additionalPackages);
Do not forget to inject the CookieModule
in the module AppModule
and SharedModule
.
CookieService
There are 7 methods available in the CookieService
(6 standard methods from Angular 1 and 1 extra removeAll()
method for convenience)
get()
Returns the value of given cookie key.
get(key: string): string;
getObject()
Returns the deserialized value of given cookie key.
getObject(key: string): Object;
getAll()
Returns a key value object with all the cookies.
getAll(): any;
put()
Sets a value for given cookie key.
put(key: string, value: string, options?: CookieOptions): void;
putObject()
Serializes and sets a value for given cookie key.
putObject(key: string, value: Object, options?: CookieOptions): void;
remove()
Remove given cookie.
remove(key: string, options?: CookieOptions): void;
removeAll()
Remove all cookies.
removeAll(): void;
Options
Options object should be a type of CookieOptions
interface. The object may have following properties:
- 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
<base>
tag. - 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.
- 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.
- secure - {boolean} - If
true
, then the cookie will only be available through a secured connection. - 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. - storeUnencoded - {boolean} - If
true
, then the cookie value will not be encoded and will be stored as provided.