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

An unopinionated cookie banner for Angular
https://github.com/exportarts/ngx-cookie-banner

angular cookie-consent

Last synced: 12 months ago
JSON representation

An unopinionated cookie banner for Angular

• Host: GitHub
• URL: https://github.com/exportarts/ngx-cookie-banner
• Owner: exportarts
• License: mit
• Created: 2020-01-11T10:20:41.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-11-26T18:19:53.000Z (over 1 year ago)
• Last Synced: 2024-11-26T19:25:16.748Z (over 1 year ago)
• Topics: angular, cookie-consent
• Language: TypeScript
• Homepage:
• Size: 1.13 MB
• Stars: 6
• Watchers: 1
• Forks: 2
• Open Issues: 44
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# ngx-cookie-banner

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)

[![npm](https://img.shields.io/npm/v/ngx-cookie-banner.svg)](https://www.npmjs.com/package/ngx-cookie-banner)

[![Build Status](https://travis-ci.com/exportarts/ngx-cookie-banner.svg?branch=master)](https://travis-ci.com/exportarts/ngx-cookie-banner)

[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=exportarts_ngx-cookie-banner&metric=alert_status)](https://sonarcloud.io/dashboard?id=exportarts_ngx-cookie-banner)

## Motivation

This lib is inspired by [angular2-cookie-law](https://github.com/andreasonny83/angular2-cookie-law)

which [is discontinued](https://github.com/andreasonny83/angular2-cookie-law/issues/42#issuecomment-655597390). 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**

```ts

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**

```html

    


        

            We use Cookies!

            dismiss

        

    


```

```css

/* app.component.scss */

.banner-inner {

    background: red;

}

.banner-inner a {

    font-weight: bold;

    cursor: pointer;

}

```

```ts

/* 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();

  }

}

```