ngx-cookie-banner-gg

Forked from https://github.com/exportarts/ngx-cookie-banner

Motivation

This lib is inspired by angular2-cookie-law which is discontinued. Therefore, I rewrote the main functionality and removed much of the opinionated styles and behaviour.

Getting Started

Install the dependency

npm i --save-exact ngx-cookie-banner-gg

Import NgxCookieBannerModule

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgxCookieBannerModule } from "ngx-cookie-banner";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    NgxCookieBannerModule.forRoot({
      cookieName: "ngx-cookie-banner-demo-app",
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Use the component

<!-- app.component.html -->

<ngx-cookie-banner #cookie>
  <div class="banner-inner">
    <span>
      We use Cookies!
      <a role="button" (click)="cookie.dismiss()">dismiss</a>
    </span>
  </div>
</ngx-cookie-banner>

/* app.component.scss */

.banner-inner {
  background: red;
}
.banner-inner a {
  font-weight: bold;
  cursor: pointer;
}

/* app.component.ts */

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent implements AfterViewInit, OnDestroy {
  @ViewChild("cookie", { static: true })
  banner: NgxCookieBannerComponent;

  private _cookieSub: Subscription;

  // It is currently necessary to manually subscribe at this
  // point to initialize the banner component.
  ngAfterViewInit() {
    this._cookieSub = this.banner.isSeen.subscribe();
  }

  ngOnDestroy() {
    this._cookieSub.unsubscribe();
  }
}