Angular2 cookies | angular2 http cookies | angular2 http get set cookie

Angular 2 cookies concept is very similar to the Angular 1.x but Angular2 added only one extra method to remove all cookies i.e. removeAll()

The All cookie methods are

1. get()

2. getObject()

3. getAll()

4. put()

5. putObject()

6. remove()

7. removeAll() - This is new one in angular 2

get() :- This method is returns the value of given cookie key.

getObject() :- This method is returns the desterilized value of given cookie key.

getAll() :- This method is returns a key value object with all the cookies.

put() :- This method is use to set a value for given cookie key.

putObject() :- This method is use to serializes and set a value for given cookie key.

remove() :-This method is use to remove given cookie.

removeAll() :-This method is use to remove all cookies.

Stayed Informed - 69 Best Angular 2 Interview Questions and Answers

You can create your own functions to get cookie value, set cookie value and delete cookie value.

Two ways to create cookies -

1. You can inject a service in the components providers.

2. You can get it via npm.

To install ng2-cookies library, run the below given code i.e.

npm install angular2-cookie --save

You can include angular2-cookie library for the same which has given below.

<script src="~/cookie/angular2-cookie.min.js"></script>

Example - You can get it via npm

The full example for creating your own functions as,

@Component({
    selector: 'cookie-consent',
    template: cookieconsent_html,
    styles: [cookieconsent_css]
})
export class CookieConsent {
    private isConsented: boolean = false;

    constructor() {
        this.isConsented = this.getCookie(COOKIE_CONSENT) === "1";
    }

    private getCookie(name: string) {
        let ca: Array<string> = document.cookie.split(';');
        let caLen: number = ca.length;
        let cookieName = name + "=";
        let c: string;

        for (let i: number = 0; i < caLen; i += 1) {
            c = ca[i].replace(/^\s\+/g, "");
            if (c.indexOf(cookieName) == 0) {
                return c.substring(cookieName.length, c.length);
            }
        }
        return "";
    }

    private deleteCookie(name) {
        this.setCookie(name, "", -1);
    }

    private setCookie(name: string, value: string, expireDays: number, path: string = "") {
        let d:Date = new Date();
        d.setTime(d.getTime() + expireDays * 24 * 60 * 60 * 1000);
        let expires:string = "expires=" + d.toUTCString();
        document.cookie = name + "=" + value + "; " + expires + (path.length > 0 ? "; path=" + path : "");
    }

    private consent(isConsent: boolean, e: any) {
        if (!isConsent) {
            return this.isConsented;
        } else if (isConsent) {
            this.setCookie(COOKIE_CONSENT, "1", COOKIE_CONSENT_EXPIRE_DAYS);
            this.isConsented = true;
            e.preventDefault();
        }
    }
}

Example 2 - You can inject a service in the components providers

//Use of Angular 2 cookies, the example in detail as give below.

import {Component} from '@angular2/core';
import {Cookie} from '@angular2-cookie/core';

@Component({
    selector: 'my-cookie-app',
    template: '<div>Cookies in Angular 2</div>',
    providers: [Cookie]
})

export class App_Component {
    constructor(private _cookie:Cookie){}
 
    getCookie(key: string){
        return this._cookie.get(key);
    }

    getCookieObject(key: string){
        return this._cookie.getObject(key);
    }
}

//And other are available methods [put(), putObject(), remove() and removeAll()] 
//All methods work similar like above methods.

I hope you are enjoying with this post! Please share with you friends. Thank you!!

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

Angular2 cookies | angular2 http cookies | angular2 http get set cookie

Reviewed by Anil Singh on 11:30 PM Rating: (5)