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!!