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

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();
  }

}