Définir le cookie en Angular

1. Cookies en Angular
2. Définir les cookies dans Angular

Dans cet article, nous aborderons les cookies dans Angular. Nous présenterons comment configurer les cookies dans Angular avec des exemples.

Cookies en Angular

Les cookies sont de petits ensembles de détails généralement stockés par votre navigateur, et les sites Web ont tendance à utiliser des cookies pour de nombreuses choses. Les cookies persistent à travers différentes requêtes, et les sessions de navigateur devraient nous aider à les définir, et ils peuvent être une excellente technique d’authentification dans certaines applications Web.

Nous pouvons utiliser des cookies pour stocker les données importantes dans de nombreuses situations, telles que l’authentification ou l’enregistrement des détails de l’utilisateur lors de la connexion. Nous pouvons facilement récupérer les données des cookies quand nous le souhaitons.

En règle générale, nous ne pouvons stocker que 20 cookies par serveur Web et pas plus de 4 Ko de données dans chaque cookie, et ils peuvent durer indéfiniment si nous préférons déterminer l’attribut max-age.

Créons une nouvelle application dans Angular en utilisant la commande suivante.

ng new my-app

Après avoir créé notre nouvelle application dans Angular, nous irons dans notre répertoire d’application à l’aide de cette commande.

cd my-app

Exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.

ng serve --open

Nous devons définir les cookies dans Angular à l’aide d’une bibliothèque ngx-cookie-service.

Définir les cookies dans Angular

Angular fournit une bibliothèque ngx-cookie-service qui peut être utilisée pour définir des cookies dans notre application Web. Nous pouvons facilement installer cette bibliothèque en utilisant la commande suivante.

npm install ngx-cookie-service --save

Cette commande téléchargera et installera la bibliothèque ngx-cookie-service dans le dossier node_modules de notre projet, et elle sera également incluse dans les dépendances.

Une fois que nous avons réussi à ajouter cette bibliothèque à notre projet, nous pouvons configurer des cookies. Il est suggéré d’importer le CookieService dans notre fichier de module, puis de l’ajouter au tableau de notre fournisseur, comme indiqué ci-dessous.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { CookieService } from 'ngx-cookie-service';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
  providers: [CookieService],
})
export class AppModule {}

Une fois que nous l’avons ajouté en tant que fournisseur, nous pouvons l’utiliser dans l’un de nos app.component.ts, comme indiqué ci-dessous.

import { Component } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private cookieService: CookieService) {}
  ngOnInit() {
    this.cookieService.set('Test', 'Hasnain');
  }

  getCookie() {
    const value: string = this.cookieService.get('Test');
    console.log(value);
  }
}

Production:

Démo