Cookie Consent Banner focuses on accessibility and on respecting the GDP. If you are using Google Analytics, this will suit to your project because this library focus on disable Google Ananlytics when the user decide to do so.
Intall cookie-service dependency through npm. npm install cookie-service
After installing, you need to import the main module: import { CookieServiceModule } from 'cookie-service-banner';
The full configuration:
import { CookieServiceModule, CookieConfig } from 'cookie-service-banner';
const testLibConfig: CookieConfig = {
header: {
title:"Cookie Consent Banner",
message: "This website uses cookie to provide your the best experience. ",
domain:"localhost",
ga_id: "UA-123456-1",
color: '#fff',
bcolor: '#000'
},
acceptButton: {
enable: false,
accept: "Got it!",
color: '#fff',
bcolor: '#266433'
},
allowButton: {
enable: true,
allow: "Allow Cookie",
color: '#000',
bcolor: '#f36e15f5'
},
declineButton: {
enable: true,
deny: "Refuse Cookie",
color: '#000',
bcolor: '#fff'
},
learnMoreLink: {
enable: true,
learnMore: "learn more",
link: "www.example.com",
color: '#3D9BFF'
},
review: {
enable: true,
message: "Review My consentement",
color: "",
bcolor: "",
}
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgbModule,
CookieServiceModule,
CookieServiceModule.forRoot(testLibConfig),
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Once the above mentionned step are done, you can use import library selector, `lib-cookie-service` in your app.component.html. ...
< lib-cookie-service (isOpened)="onOpen($event)" >< /lib-cookie-service> isOpened is function meant to state the openning or the closing of the cookie banner.
Notice that you need to provide your GA ID in order to help the library to disbable Google analtycs if the user refuse the use of cookie.