Cookies management

Angular Bootstrap 5 Cookies management plugin

This component is used to save in the browser data that we want to have access at the next user visit. For example how many times or when last time user visit our page.

Cookies management built with the latest Bootstrap 5. Options included: show modals only to new users, set a cookie, and much more.

Note: Read the API tab to find all available options and advanced customization

Basic example

The Cookies Management Service provides methods to add, remove and get cookies

Advanced example

Show Modal for new users

Using the showModalNewUser method you can display the modal for new users. Click start button to start simulate this behavior. After next click modal don't show any more until you click reset. 

        
            
          <button (click)="setCookieForNewUser()" type="button" class="btn btn-primary">
            Show Modal
          </button>
          <button (click)="resetCookieForNewUser()" type="button" class="btn btn-primary">
            Reset
          </button>
          
        
    
        
            
          import { Component } from '@angular/core';
          import { MdbCookiesManagementService } from 'mdb-angular-cookies-management';
          import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
          })
          export class AppComponent {
            modalRefNewUser: MdbModalRef<ModalNewUserComponent> | null = null;
          
            constructor(
              private _cookieService: MdbCookiesManagementService,
              private _modalService: MdbModalService
            ) {}
          
            setCookieForNewUser() {
              const isFirstVisitOnPage = !this._cookieService.get('is-first-visit');
              if (isFirstVisitOnPage) {
                this.showModalNewUser();
              }
            }
          
            resetCookieForNewUser() {
              this._cookieService.remove('is-first-visit');
            }
          
            showModalNewUser() {
                this.modalRefNewUser = this._modalService.open(ModalNewUserComponent);
                this.modalRefNewUser.onClose.subscribe((message: any) => {
                  this._cookieService.set('is-first-visit', false, { expires: 365 });
                });
            }
          }

Show modal after next visit

If you want to display the modal to the person who will visit the page again, you can use the showModalScoring method. Enter as a parameter the information after how many visits to the website the modal should appear. Click start button 3 times to test this feature. 

        
            
            <button (click)="setCookieForScoring()" type="button" class="btn btn-primary">
              Show Modal
            </button>
            <button (click)="resetCookieForScoring()" type="button" class="btn btn-primary">
              Reset
            </button>
            
        
    
        
            
              import { Component } from '@angular/core';
              import { MdbCookiesManagementService } from 'mdb-angular-cookies-management';
              import { MdbModalRef, MdbModalService } from 'mdb-angular-ui-kit/modal';
  
              @Component({
                selector: 'app',
                templateUrl: './app.component.html',
              })
              export class AppComponent {
                  modalRefScoring: MdbModalRef<ModalScoringComponent> | null = null;
                
                  constructor(
                    private _cookieService: MdbCookiesManagementService,
                    private _modalService: MdbModalService
                  ) {}

                  setCookieForScoring() {
                    this.showModalScoring(3);
                  }
                
                  resetCookieForScoring() {
                    this._cookieService.remove('visit-counter');
                  }
                
                  showModalScoring(value) {
                    const counter = Number(this._cookieService.get('visit-counter')) || 0;
                    const newCounter = counter + 1;
                
                    this._cookieService.set('visit-counter', newCounter, { expires: 365 });
                
                    if (newCounter === value) {
                      this.modalRefScoring = this._modalService.open(ModalScoringComponent);
                    }
                  }
              }

Cookies management - API

Installation

To install and configure the plugin follow our Plugins Installation Guide. Please remember to update all the plugin names and import paths. You can find all the necessary information in the Import section. 

        
            
     npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/cookies-management

Import

        
            
        import { MdbCookiesManagementService } from 'mdb-angular-cookies-management';
        …
        @NgModule ({
        ...
        providers: [MdbCookiesManagementService],
        ...
        })

Methods

Name Description Example
set(name:string,value:any,attributes:any) Set Cookie cookiesService.set('first-visit', new Date(), { expires: 1 })
get(name?:string) Get Cookie cookiesService.get('first-visit')
remove(name:string) Remove Cookie cookiesService.remove('first-visit') 
        
            
          <button (click)="setCookie()" type="button" class="btn btn-primary">
            Set cookie
          </button>                         
          
        
    
        
            
          import { Component } from '@angular/core';
          import { MdbCookiesManagementService } from 'mdb-angular-cookies-management';
          
          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
          })
          export class AppComponent {
            constructor(private _cookiesService: MdbCookiesManagementService) {}
          
            setCookie() {
              this._cookiesService.set('first-visit', new Date(), { expires: 1 });
            }
          }