57 Best Advantages for Angular 5

Angular 5 Cookies - Check, Get, GetAll, Delete and DeleteAll Methods

The cookie based authentication has been the default and the cookie based authentication is stateful.

Stateful – keep and track of the previously stored information which is used for current transaction.

A Stateful service based on HTTP Cookies uses the HTTP transport protocol and its ability to convey cookies, used as session context.

Cookies Methods -
Check (name: string): Boolean;
//Check Cookies
const IsCookieExists: boolean = this.cookieService.check('cookieApp');

Get (name: string): string;
    //Get Cookies
    this.cookieValue = this.cookieService.get('cookieApp');

getAll(): {};
    //Get all cookies
    const allCookies: {} = this.cookieService.getAll();

Delete (name: string, path?: string, domain?: string ): void;

    //delete cookies
    this.cookieService.delete('cookieApp');

deleteAll ( path?: string, domain?: string ): void;
    //delete all cookies
    this.cookieService.deleteAll();


Example for Cookies methods

Steps 1- Install cookies in your project using below command –
In the above, “D:\Angular\ServiceDemo>” is my project directory and ServiceDemo is my project name.

Steps 2 - Import “ngx-cookie-service” in your “app.module.ts” and its looks like –
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';

import { HttpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {DateServiceServicefrom '../app/date-service.service';
import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';
import { BillComponent } from './bill/bill.component';
import {BillServicefrom '../app/bill.service';
import { CookieService } from 'ngx-cookie-service';

@NgModule({
  declarations: [
    AppComponent,
    UserComponent,
    BillComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      {
        path:'app-user', component : UserComponent
      },
      {
        path:'app-bill', component : BillComponent
      }
    ])
  ],
  providers: [DateServiceService, BillService, CookieService],
    bootstrap: [AppComponent]
})
export class AppModule { }


Steps 3 – Import “CookieService” in your “app.component.ts” and its looks like
import { Component } from '@angular/core';
import {DateServiceService} from '../app/date-service.service';
import { CookieService } from 'ngx-cookie-service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular App';
  todayDate;
  cookieValue = 'Anil Singh';

  constructor(private dateService : DateServiceService,
                    private cookieService: CookieService){
    this.todayDate = dateService.getTodayDate();
  }

  ngOnInit(): void {
    //Set cookies
    this.cookieService.set('cookieApp', 'Welcome you, Anil!' );
    //Get Cookies
    this.cookieValue = this.cookieService.get('cookieApp');

    // //Check Cookies
    // const IsCookieExists: boolean = this.cookieService.check('cookieApp');
    // //Get Cookies
    // const value: string = this.cookieService.get('cookieApp');
    // //Get all cookies
    // const allCookies: {} = this.cookieService.getAll();
    // //delete cookies
    // this.cookieService.delete('cookieApp');
    // //delete all cookies
    // this.cookieService.deleteAll();
  }
}

Cookies Limitations 
We can only store around 20 cookies per web server and not more than 4KB of information in each cookie and they can last indefinitely should you choose to specify the max-age attribute.

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

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

Angular 5 Cookies - Check, Get, GetAll, Delete and DeleteAll Methods Angular 5 Cookies - Check, Get, GetAll, Delete and DeleteAll Methods Reviewed by Anil Singh on 3:36 AM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^