+
+
+
+ 
+
Install above dependencies via npm. In particular for Cookie Consent:
+npm install --save cookieconsent
Now install ngx-cookieconsent via:
+npm install --save ngx-cookieconsent
++Note: If you are using
+angular-clito build your app, make sure thatcookieconsentis properly listed as a global library, and as global style.
To do so, edit your angular-cli.json as such:
+"scripts":"../node_modules/cookieconsent/build/cookieconsent.min.js""styles":"../node_modules/cookieconsent/build/cookieconsent.min.css"
++Note:If you are using
+SystemJS, you should adjust your configuration to point to the UMD bundle. +In your systemjs config file,mapneeds to tell the System loader where to look forngx-cookieconsent:
+map:'ngx-cookieconsent': 'node_modules/ngx-cookieconsent/bundles/ngx-cookieconsent.umd.js'
In your systemjs config file, meta needs to tell the System loader how to load cookieconsent:
+meta:'./node_modules/cookieconsent/build/cookieconsent.min.js':format: 'amd'
In your index.html file, add script and link tags to load cookieconsent globally:
+<!-- 1 Configure SystemJS --><script src="system.config.js"></script><!-- 2 Add cookieconsent dependency--><link rel="stylesheet" type="text/css" href="node_modules/cookieconsent/build/cookieconsent.min.css"/><script src="node_modules/cookieconsent/build/cookieconsent.min.js"></script>
Once installed you need to import the main module:
++;
The only remaining part is to list the imported module in your application module. The exact method will be slightly
+different for the root (top-level) module for which you should end up with the code similar to (notice NgcCookieConsentModule.forRoot()):
+;const cookieConfig:NgcCookieConsentConfig =cookie:domain: 'localhost' // or 'your.domain.com' // it is mandatory to set a domain, for cookies to work properly (see https://goo.gl/S2Hy2A)palette:popup:background: '#000'button:background: '#f1d600'theme: 'edgeless'type: 'opt-out';@
Other modules in your application can simply import NgcCookieConsentModule:
+;@
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:
++;;;@implements OnInit OnDestroy//keep refs to subscriptions to be able to unsubscribe laterprivate popupOpenSubscription: Subscription;private popupCloseSubscription: Subscription;private initializeSubscription: Subscription;private statusChangeSubscription: Subscription;private revokeChoiceSubscription: Subscription;private noCookieLawSubscription: Subscription;{{ '{' }}}{{ '{' }}// subscribe to cookieconsent observables to react to main eventsthispopupOpenSubscription = thisccServicepopupOpen$;thispopupCloseSubscription = thisccServicepopupClose$;thisinitializeSubscription = thisccServiceinitialize$;thisstatusChangeSubscription = thisccServicestatusChange$;thisrevokeChoiceSubscription = thisccServicerevokeChoice$;thisnoCookieLawSubscription = thisccServicenoCookieLaw$;}{{ '{' }}// unsubscribe to cookieconsent observables to prevent memory leaksthispopupOpenSubscription;thispopupCloseSubscription;thisinitializeSubscription;thisstatusChangeSubscription;thisrevokeChoiceSubscription;thisnoCookieLawSubscription;}
See Cookie Consent Documentation to see more about how to customize the UI or interact with user interactions.
+Messages displayed in the Cookie Consent Bar can easily be translated, using libraries like ngx-translate. +Basically this involved the following steps (using ngx-translate + Anglar CLI):
+Provide the translation JSON files in src/assets/, for e.g: en.json, fr.json, ...
+"cookie":"header": "Cookies used on the website!""message": "This website uses cookies to ensure you get the best experience on our website.""dismiss": "Got it!""allow": "Allow cookies""deny": "Decline""link": "Learn more""policy": "Cookie Policy"
++Note: see content-options.ts for complete list of messages that can be translated.
+
AppComponent+;;@{{ '{' }}}{{ '{' }}// Support for translated cookies messagesthistranslateService;thistranslateService;const browserLang = thistranslateService;thistranslateService;thistranslateService//;}
ngx-cookieconsent is built upon Cookie Consent, created by Insites
Copyright (c) 2018 Tine Kondo. Licensed under the MIT License (MIT)
+ +
+ {{ options | json }}
+
+ + For help and additional options see the official documentation. +
\ No newline at end of file diff --git a/ngx-cookieconsent/apps/ngx-cookieconsent-demo/src/app/home/playground/playground.component.scss b/ngx-cookieconsent/apps/ngx-cookieconsent-demo/src/app/home/playground/playground.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/ngx-cookieconsent/apps/ngx-cookieconsent-demo/src/app/home/playground/playground.component.spec.ts b/ngx-cookieconsent/apps/ngx-cookieconsent-demo/src/app/home/playground/playground.component.spec.ts new file mode 100644 index 0000000..6cfd719 --- /dev/null +++ b/ngx-cookieconsent/apps/ngx-cookieconsent-demo/src/app/home/playground/playground.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PlaygroundComponent } from './playground.component'; + +describe('PlaygroundComponent', () => { + let component: PlaygroundComponent; + let fixture: ComponentFixture