diff --git a/README.md b/README.md index 5ea7fa4..a3c7dd6 100644 --- a/README.md +++ b/README.md @@ -143,14 +143,14 @@ import { Subscription } from 'rxjs'; export class AppComponent implements OnInit, OnDestroy { //keep refs to subscriptions to be able to unsubscribe later - private popupOpenSubscription: Subscription; - private popupCloseSubscription: Subscription; - private initializeSubscription: Subscription; + private popupOpenSubscription!: Subscription; + private popupCloseSubscription!: Subscription; + private initializingSubscription!: Subscription; private initializedSubscription!: Subscription; private initializationErrorSubscription!: Subscription; - private statusChangeSubscription: Subscription; - private revokeChoiceSubscription: Subscription; - private noCookieLawSubscription: Subscription; + private statusChangeSubscription!: Subscription; + private revokeChoiceSubscription!: Subscription; + private noCookieLawSubscription!: Subscription; constructor(private ccService: NgcCookieConsentService){} @@ -166,10 +166,10 @@ export class AppComponent implements OnInit, OnDestroy { // you can use this.ccService.getConfig() to do stuff... }); - this.initializeSubscription = this.ccService.initialize$.subscribe( - (event: NgcInitializeEvent) => { + this.initializingSubscription = this.ccService.initializing$.subscribe( + (event: NgcInitializingEvent) => { // the cookieconsent is initilializing... Not yet safe to call methods like `NgcCookieConsentService.hasAnswered()` - console.log(`initialize: ${JSON.stringify(event)}`); + console.log(`initializing: ${JSON.stringify(event)}`); }); this.initializedSubscription = this.ccService.initialized$.subscribe( @@ -205,7 +205,9 @@ export class AppComponent implements OnInit, OnDestroy { // unsubscribe to cookieconsent observables to prevent memory leaks this.popupOpenSubscription.unsubscribe(); this.popupCloseSubscription.unsubscribe(); - this.initializeSubscription.unsubscribe(); + this.initializingSubscription.unsubscribe(); + this.initializedSubscription.unsubscribe(); + this.initializationErrorSubscription.unsubscribe(); this.statusChangeSubscription.unsubscribe(); this.revokeChoiceSubscription.unsubscribe(); this.noCookieLawSubscription.unsubscribe(); diff --git a/apps/ngx-cookieconsent-demo/src/app/app.component.ts b/apps/ngx-cookieconsent-demo/src/app/app.component.ts index e0a6125..535ec14 100644 --- a/apps/ngx-cookieconsent-demo/src/app/app.component.ts +++ b/apps/ngx-cookieconsent-demo/src/app/app.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy, Inject, PLATFORM_ID } from '@angular/core import { Router, NavigationEnd, Event } from '@angular/router'; import { isPlatformBrowser } from '@angular/common'; -import { NgcCookieConsentService, NgcInitializeEvent, NgcInitializationErrorEvent, NgcStatusChangeEvent, NgcNoCookieLawEvent } from 'ngx-cookieconsent'; +import { NgcCookieConsentService, NgcInitializingEvent, NgcInitializationErrorEvent, NgcStatusChangeEvent, NgcNoCookieLawEvent } from 'ngx-cookieconsent'; import { filter } from 'rxjs/operators'; import { Subscription } from 'rxjs'; @@ -17,7 +17,7 @@ export class AppComponent implements OnInit, OnDestroy{ //keep refs to subscriptions to be able to unsubscribe later private popupOpenSubscription!: Subscription; private popupCloseSubscription!: Subscription; - private initializeSubscription!: Subscription; + private initializingSubscription!: Subscription; private initializedSubscription!: Subscription; private initializationErrorSubscription!: Subscription; private statusChangeSubscription!: Subscription; @@ -48,10 +48,10 @@ export class AppComponent implements OnInit, OnDestroy{ console.log('popuClose'); }); - this.initializeSubscription = this.ccService.initialize$.subscribe( - (event: NgcInitializeEvent) => { + this.initializingSubscription = this.ccService.initializing$.subscribe( + (event: NgcInitializingEvent) => { // the cookieconsent is initilializing... Not yet safe to call methods like `NgcCookieConsentService.hasAnswered()` - console.log(`initialize: ${JSON.stringify(event)}`); + console.log(`initializing: ${JSON.stringify(event)}`); }); this.initializedSubscription = this.ccService.initialized$.subscribe( @@ -95,7 +95,9 @@ export class AppComponent implements OnInit, OnDestroy{ // unsubscribe to cookieconsent observables to prevent memory leaks this.popupOpenSubscription.unsubscribe(); this.popupCloseSubscription.unsubscribe(); - this.initializeSubscription.unsubscribe(); + this.initializingSubscription.unsubscribe(); + this.initializedSubscription.unsubscribe(); + this.initializationErrorSubscription.unsubscribe(); this.statusChangeSubscription.unsubscribe(); this.revokeChoiceSubscription.unsubscribe(); this.noCookieLawSubscription.unsubscribe(); diff --git a/apps/ngx-cookieconsent-demo/src/app/getting-started/getting-started.component.html b/apps/ngx-cookieconsent-demo/src/app/getting-started/getting-started.component.html index 0038e21..47dc3a0 100644 --- a/apps/ngx-cookieconsent-demo/src/app/getting-started/getting-started.component.html +++ b/apps/ngx-cookieconsent-demo/src/app/getting-started/getting-started.component.html @@ -44,7 +44,7 @@
SystemJS

Usage

Once the module is imported, you can use the NgcCookieContentService in your component (i.e. AppComponent) to subscribe to main events fired by Cookie Consent and do stuff like disabling cookies or other.

Here is how it works:

-
import {{ '{' }} Component, OnInit, OnDestroy } from '@angular/core';
import {{ '{' }} NgcCookieConsentService } from 'ngx-cookieconsent';
import {{ '{' }} Subscription }   from 'rxjs/Subscription';
 
@Component({{ '{' }}
  selector: 'ngc-demo-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {{ '{' }}
 
  //keep refs to subscriptions to be able to unsubscribe later
  private popupOpenSubscription: Subscription;
  private popupCloseSubscription: Subscription;
  private initializeSubscription: Subscription;
  private statusChangeSubscription: Subscription;
  private revokeChoiceSubscription: Subscription;
  private noCookieLawSubscription: Subscription;
 
  constructor(private ccService: NgcCookieConsentService){{ '{' }}}
 
  ngOnInit() {{ '{' }}
    // subscribe to cookieconsent observables to react to main events
    this.popupOpenSubscription = this.ccService.popupOpen$.subscribe(
      () => {{ '{' }}
        // you can use this.ccService.getConfig() to do stuff...
      });
 
    this.popupCloseSubscription = this.ccService.popupClose$.subscribe(
      () => {{ '{' }}
        // you can use this.ccService.getConfig() to do stuff...
      });
 
    this.initializeSubscription = this.ccService.initialize$.subscribe(
      (event: NgcInitializeEvent) => {{ '{' }}
        // you can use this.ccService.getConfig() to do stuff...
      });
 
    this.statusChangeSubscription = this.ccService.statusChange$.subscribe(
      (event: NgcStatusChangeEvent) => {{ '{' }}
        // you can use this.ccService.getConfig() to do stuff...
      });
 
    this.revokeChoiceSubscription = this.ccService.revokeChoice$.subscribe(
      () => {{ '{' }}
        // you can use this.ccService.getConfig() to do stuff...
      });
 
      this.noCookieLawSubscription = this.ccService.noCookieLaw$.subscribe(
      (event: NgcNoCookieLawEvent) => {{ '{' }}
        // you can use this.ccService.getConfig() to do stuff...
      });
  }
 
  ngOnDestroy() {{ '{' }}
    // unsubscribe to cookieconsent observables to prevent memory leaks
    this.popupOpenSubscription.unsubscribe();
    this.popupCloseSubscription.unsubscribe();
    this.initializeSubscription.unsubscribe();
    this.statusChangeSubscription.unsubscribe();
    this.revokeChoiceSubscription.unsubscribe();
    this.noCookieLawSubscription.unsubscribe();
  }
}
 
+
import {{ '{' }} Component, OnInit, OnDestroy } from '@angular/core';
import {{ '{' }} NgcCookieConsentService } from 'ngx-cookieconsent';
import {{ '{' }} Subscription }   from 'rxjs/Subscription';
 
@Component({{ '{' }}
  selector: 'ngc-demo-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {{ '{' }}
 
  //keep refs to subscriptions to be able to unsubscribe later
  private popupOpenSubscription: Subscription;
  private popupCloseSubscription: Subscription;
  private initializingSubscription: Subscription;
  private statusChangeSubscription: Subscription;
  private revokeChoiceSubscription: Subscription;
  private noCookieLawSubscription: Subscription;
 
  constructor(private ccService: NgcCookieConsentService){{ '{' }}}
 
  ngOnInit() {{ '{' }}
    // subscribe to cookieconsent observables to react to main events
    this.popupOpenSubscription = this.ccService.popupOpen$.subscribe(
      () => {{ '{' }}
        // you can use this.ccService.getConfig() to do stuff...
      });
 
    this.popupCloseSubscription = this.ccService.popupClose$.subscribe(
      () => {{ '{' }}
        // you can use this.ccService.getConfig() to do stuff...
      });
 
    this.initializingSubscription = this.ccService.initializing$.subscribe(
      (event: NgcInitializingEvent) => {{ '{' }}
        // you can use this.ccService.getConfig() to do stuff...
      });
 
    this.statusChangeSubscription = this.ccService.statusChange$.subscribe(
      (event: NgcStatusChangeEvent) => {{ '{' }}
        // you can use this.ccService.getConfig() to do stuff...
      });
 
    this.revokeChoiceSubscription = this.ccService.revokeChoice$.subscribe(
      () => {{ '{' }}
        // you can use this.ccService.getConfig() to do stuff...
      });
 
      this.noCookieLawSubscription = this.ccService.noCookieLaw$.subscribe(
      (event: NgcNoCookieLawEvent) => {{ '{' }}
        // you can use this.ccService.getConfig() to do stuff...
      });
  }
 
  ngOnDestroy() {{ '{' }}
    // unsubscribe to cookieconsent observables to prevent memory leaks
    this.popupOpenSubscription.unsubscribe();
    this.popupCloseSubscription.unsubscribe();
    this.initializingSubscription.unsubscribe();
    this.statusChangeSubscription.unsubscribe();
    this.revokeChoiceSubscription.unsubscribe();
    this.noCookieLawSubscription.unsubscribe();
  }
}
 

See Cookie Consent Documentation to see more about how to customize the UI or interact with user interactions.

I18n Support

Messages displayed in the Cookie Consent Bar can easily be translated, using libraries like ngx-translate. diff --git a/libs/ngx-cookieconsent/src/index.ts b/libs/ngx-cookieconsent/src/index.ts index f33e15a..b440875 100644 --- a/libs/ngx-cookieconsent/src/index.ts +++ b/libs/ngx-cookieconsent/src/index.ts @@ -11,4 +11,4 @@ export { NgcCookiePosition, NgcCookieLayout, NgcCookieType, NgcCookieTheme, NgcCookieCompliance, NgcCookieOptions } from './lib/model/index'; -export { NgcInitializeEvent, NgcInitializationErrorEvent, NgcStatusChangeEvent, NgcNoCookieLawEvent } from './lib/event/index'; +export { NgcInitializingEvent, NgcInitializationErrorEvent, NgcStatusChangeEvent, NgcNoCookieLawEvent } from './lib/event/index'; diff --git a/libs/ngx-cookieconsent/src/lib/event/index.ts b/libs/ngx-cookieconsent/src/lib/event/index.ts index ea1587a..cfbccce 100644 --- a/libs/ngx-cookieconsent/src/lib/event/index.ts +++ b/libs/ngx-cookieconsent/src/lib/event/index.ts @@ -1,5 +1,5 @@ export * from './status-change.event'; -export * from './initialize.event'; +export * from './initializing.event'; export * from './initialization-error.event'; export * from './no-cookie-law.event'; diff --git a/libs/ngx-cookieconsent/src/lib/event/initialize.event.ts b/libs/ngx-cookieconsent/src/lib/event/initializing.event.ts similarity index 78% rename from libs/ngx-cookieconsent/src/lib/event/initialize.event.ts rename to libs/ngx-cookieconsent/src/lib/event/initializing.event.ts index 2e9c180..318f01c 100644 --- a/libs/ngx-cookieconsent/src/lib/event/initialize.event.ts +++ b/libs/ngx-cookieconsent/src/lib/event/initializing.event.ts @@ -1,7 +1,7 @@ /** * Event fired when Cookie Consent initializes. */ -export interface NgcInitializeEvent { +export interface NgcInitializingEvent { /** * The status of cookie consent */ diff --git a/libs/ngx-cookieconsent/src/lib/service/cookieconsent.service.spec.ts b/libs/ngx-cookieconsent/src/lib/service/cookieconsent.service.spec.ts index 4f02833..e637467 100644 --- a/libs/ngx-cookieconsent/src/lib/service/cookieconsent.service.spec.ts +++ b/libs/ngx-cookieconsent/src/lib/service/cookieconsent.service.spec.ts @@ -4,7 +4,7 @@ import { NgcCookieConsentModule } from './../ngx-cookieconsent.module'; import { NgcCookieConsentService } from './cookieconsent.service'; import { NgcCookieConsentConfig } from './cookieconsent-config'; import { WindowService } from './window.service'; -import { NgcInitializeEvent } from './../event/initialize.event'; +import { NgcInitializingEvent } from './../event/initializing.event'; import { NgcStatusChangeEvent } from './../event/status-change.event'; import { NgcNoCookieLawEvent } from './../event/no-cookie-law.event'; @@ -177,7 +177,7 @@ describe('Service: NgcCookieConsent', () => { }); - it('should emit initialize$ event when calling onInitialise() callback', () => { + it('should emit initializing$ event when calling onInitialise() callback', () => { TestBed.configureTestingModule({ imports: [NgcCookieConsentModule.forRoot(myConfig)] }); @@ -190,7 +190,7 @@ describe('Service: NgcCookieConsent', () => { '1': 'allow', '2': 'deny' }; - service.initialize$.subscribe((event: NgcInitializeEvent) => { + service.initializing$.subscribe((event: NgcInitializingEvent) => { calls++; expect(event).toEqual({ status: `${statusCallParams[calls]}` }); }); diff --git a/libs/ngx-cookieconsent/src/lib/service/cookieconsent.service.ts b/libs/ngx-cookieconsent/src/lib/service/cookieconsent.service.ts index 3d5f859..7af77db 100644 --- a/libs/ngx-cookieconsent/src/lib/service/cookieconsent.service.ts +++ b/libs/ngx-cookieconsent/src/lib/service/cookieconsent.service.ts @@ -4,7 +4,7 @@ import { Subject, Observable } from 'rxjs'; import { NgcCookieConsentStatus } from '../model/common-interfaces'; import { NgcStatusChangeEvent } from '../event/status-change.event'; import { NgcNoCookieLawEvent } from '../event/no-cookie-law.event'; -import { NgcInitializeEvent } from '../event/initialize.event'; +import { NgcInitializingEvent } from '../event/initializing.event'; import { NgcInitializationErrorEvent } from '../event'; import { NgcCookieConsentConfig } from './cookieconsent-config'; import { WindowService } from './window.service'; @@ -69,7 +69,7 @@ export class NgcCookieConsentService { // Observable sources private popupOpenSource: Subject; private popupCloseSource: Subject; - private initializeSource: Subject; + private initializingSource: Subject; private initializedSource: Subject; private initializationErrorSource: Subject; private statusChangeSource: Subject; @@ -87,7 +87,7 @@ export class NgcCookieConsentService { /** * Observable to subscribe to and get notified when Cookie Consent is initializing. */ - initialize$: Observable; + initializing$: Observable; /** * Observable to subscribe to and get notified when Cookie Consent has been successfully initialized. */ @@ -113,7 +113,7 @@ export class NgcCookieConsentService { // Observable sources this.popupOpenSource = new Subject(); this.popupCloseSource = new Subject(); - this.initializeSource = new Subject(); + this.initializingSource = new Subject(); this.initializedSource = new Subject(); this.initializationErrorSource = new Subject(); this.statusChangeSource = new Subject(); @@ -123,7 +123,7 @@ export class NgcCookieConsentService { // Observable streams this.popupOpen$ = this.popupOpenSource.asObservable(); this.popupClose$ = this.popupCloseSource.asObservable(); - this.initialize$ = this.initializeSource.asObservable(); + this.initializing$ = this.initializingSource.asObservable(); this.initialized$ = this.initializedSource.asObservable(); this.initializationError$ = this.initializationErrorSource.asObservable(); this.statusChange$ = this.statusChangeSource.asObservable(); @@ -158,7 +158,7 @@ export class NgcCookieConsentService { () => this.popupCloseSource.next(); this.config.onInitialise = - (status: 'allow' | 'deny' | 'dismiss') => this.initializeSource.next({ status: status }); + (status: 'allow' | 'deny' | 'dismiss') => this.initializingSource.next({ status: status }); this.config.onStatusChange = (status: 'allow' | 'deny' | 'dismiss', chosenBefore: boolean) => {