# ngx-ui-components > ## Demo Latest version **0.0.1-alpha.2** (published 2019-10-26) · SEE LICENSE IN LICENSE license · 0 weekly downloads ## Install ```sh npm install ngx-ui-components pnpm add ngx-ui-components yarn add ngx-ui-components bun add ngx-ui-components ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.1-alpha.2 | | Published | 2019-10-26 | | First published | 2019-03-20 | | Weekly downloads | 0 | | License | SEE LICENSE IN LICENSE | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 697 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | wkoza | | Keywords | Angular, UI, components, cookie consent, progress bar reading, Google Analytics | ## Links - npm: https://www.npmjs.com/package/ngx-ui-components - Repository: https://github.com/wKoza/ngx-ui-components - Homepage: https://github.com/wKoza/ngx-ui-components#readme - Issues: https://github.com/wKoza/ngx-ui-components/issues - npm.io page: https://npm.io/package/ngx-ui-components ## Dependencies (1) - [tslib](https://npm.io/package/tslib.md) ^1.9.0 ## Alternatives - [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads - [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads - [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads - [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads - [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads ## Recent versions - 0.0.1-alpha.2 (latest) — 2019-10-26 - 0.0.1-alpha.1 — 2019-10-26 - 0.0.1-alpha.0 — 2019-03-20 ## README # Ngx-ui-components ## Demo https://ngx-ui-components.github.io ## Table of contents - [About](#about) - [Installation](#installation) - [Usage](#usage) - [Hooks](#hooks) - [Documentation](#documentation) - [License](#license) ## About Ngx-ui-components is a UI library usable with the Angular framework. Ngx-ui-components's vocation is to provide a bunch of component for everyday use. Ngx-ui-components is tree-shakable, so, it's lightweight. Currently, Ngx-ui-components provides: - Cookie consent: It's an Angular module for alerting users about the use of cookie for tracking on a website. This module try to respect cookie law relevant to EU. Optionally, it handles the de-identifying for Google Analitics. - Google Analytics: It's a just an Angular service which handles the common use cases. - Reading progress bar: This module adds a reading progress bar which helps users to see its progression when it scrolls in a page. ## Installation Install through npm: ``` npm install ngx-ui-components ``` OR ``` yarn add ngx-ui-components ``` ## Usage ### ReadingProgressBarModule Module This module may be added in any module of your application. You just have to include this module in your application. For instance: ```typescript import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { ReadingProgressBarModule } from 'ngx-ui-components/reading-progress-bar'; @NgModule({ imports: [BrowserModule, ReadingProgressBarModule], }) export class AppModule {} ``` Under the hood, ReadingProgressBarModule offers one directive that you can apply on any DOM Element, generally a span or a div: ```html
``` You have to define a css class, for example, like this: ```css .progression { margin: 0; padding: 0; top: 0; height: 4px; position: fixed; display: block; width: 0%; z-index: 12; background: #e9573f; } ``` Now you have progress bar on the top of your page. It's just an example, you can change this css as you want. ### GoogleAnalyticsModule module This module has to be added in your `AppModule` of your application like this: ```ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { GoogleAnalyticsModule } from 'ngx-ui-components/google-analytics'; @NgModule({ imports: [BrowserModule, GoogleAnalyticsModule.forRoot('UA-XXXXXXXX-X')], }) export class AppModule {} ``` As you see, you have to use the `forRoot` method with, as parameter, your ID Google Analytics. GoogleAnalyticsModule offers a simple service that allows: - to track the location with `sendPage` method. - to track user actions with `sendEnvent` method. You can read [this article](https://developers.google.com/analytics/devguides/collection/analyticsjs/events) for further information. - To insert the Google Analytics script in your app with `startGoogleAnalytics` method You just have to inject `GaService` service and call these methods. ```ts @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent { constructor(private gaService: GaService) {} ngOnInit() { // Start Google Analytics this.gaService.startGoogleAnalytics(); this.gaService.sendPage(location.pathname); this.gaService.sendEvent('send', 'event', 'Videos', 'play', 'Fall Campaign'); this.gaService.setPage(location.pathname); ... this.gaService.sendPageView(); // or you can simply call `ga` method that opens all GA's capacities this.gaService.ga('send', 'social', 'Facebook', 'like', 'http://myownpersonaldomain.com'); } } ``` ### CookieLawConsentModule module CookieLawConsentModule provides a simple way for handling the european law concerning the cookies and the private life. This module has to be added in your `AppModule` of your application like this: ```ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { CookieLawConsentModule } from 'ngx-ui-components/cookie-consent'; @NgModule({ imports: [BrowserModule, CookieLawConsentModule.forRoot()], }) export class AppModule {} ``` As you see, you have to use the `forRoot` method. This method accepts a config object ot type `CookieLawConsentConfig`: - `cookie: CookieOptions`: cookie options - set these values to correspond with your server's strategy. - `position: PositionType`: position of the banner. The value can be `top` or `bottom`. Default value `bottom`. - `dismissOnScroll: boolean`: Create a cookie with value `dismiss` when the user scroll on the page. Default value `false`. - `allowOnDismiss: boolean`: Allow Google Analytics tracking on dismiss. - `askConsentText: string`: Message to be shown when the user come. - `doNotTrackText: string`: Message to be shown when the user has doNotTrack option in his browser. - `autoOpen: boolean`: The application automatically decide whether the popup should open. Default value `true`. - `acceptButtonText: string`: Label of the "accept" button. - `acceptButton: boolean`: display the button if `true`. Default value `true`. - `declineButtonText: string`: Label of the "decline" button. - `declineButton: boolean`: display the button if `true`. Default value `true`. - `gaProperty: string`: Le Google Analytic ID. Using the feature could be straightforward since you just have to use the component `` in your main template like this: ```html
``` but you can also choose to manage the banner manually thanks to the `autoOpen` action. In this case, you have to add a property binding of boolean type: ```html
``` and subscribe to an observable called `popupOpen$` like this: ```ts export class ReadingProgressBarComponent implements OnInit { opened = false; constructor(private cookieConsentService: CookieConsentService) {} ngOnInit() { this.cookieConsentService.popupOpen$.subscribe(() => (this.opened = true)); } } ``` One final point concerning the `CookieOptions` object. It should be conform with your server and your legislation: - `name`: the name of your cookie. Default value 'cookielawconsent' - `path`: The cookie path. Default value '/' - `domain`: The domain that the cookie 'name' belongs to. The cookie can only be read on this domain. Default value is empty - `expires`: The cookies expire date, specified in days (specify -1 for no expiry). Default value `365`; - `secure`: If true the cookie will be created with the secure flag. Secure cookies will only be transmitted via HTTPS. Default value `false` - `sameSite`: SameSite prevents the browser from sending this cookie along with cross-site requests. Default value is empty ## License MIT --- _Source: https://npm.io/package/ngx-ui-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._