Collection of small helper components, directives and services that might be published in a more convenient format via NPM in the future.
Tested with Angular 8-9
Manually copy and integrate these files in your own Angular setup.
Make sure to set the correct import paths for requirements. Some classes need to be integrated in the main application module and component. Watch out for 'todo' comments where custom data is required.
Use with view components. Applies trackByFn to improve list rendering performance.
Component
import { AbstractComponent } from 'abstract.component';
@Component(...)
export class UiNavigationFooterComponent extends AbstractComponent {
...View
<ul>
<li *ngFor="let item of items; trackBy: trackByFn">{{item.id}}</li>
</ul>Allow tracking custom events via Google Analytics.
Services
- GoogleAnalyticsEventsService
<a [appTrackEvent]="['UI module', 'Click', link.name, 1]">Link</a>Angular wrapper for the NPM plugin, including a little tweak (yep, dirty) to also respect the 'do not track signal' users might set. In this case, cookies will always be declined. A better way would be to change the cookie banner text as well.
Todo: Decouple dependency, optimize display.
- global.d.ts
Services
- UserTrackPreferenceService
External
Enables Google Analytics and defines a custom datalayer variable. Respects user opt-in from 'cookie consent'.
- index.html
- global.d.ts
Services
- CookieConsentService
- GoogleAnalyticsEventsService
External
Allows tracking custom and navigation change events.
Custom events can be tracked via TrackEventDirective.
export class ExampleComponent {
constructor( private googleAnalyticsEventsService: GoogleAnalyticsEventsService ) {
}
track( event: any ) {
const eventData = ['UI module', 'Click', 'EVENT VALUE', 1];
this.googleAnalyticsEventsService.trackCustomEvent( eventData );
}
}Set user colour scheme preference as CSS class. It will be stored and loaded from cookie as well. The information is useful for theming websites and applying 'light switches'.
Todo: Move to LocalStorage instead, no need for cookies here.
Retrieve 'do not track signal' from user settings. Used to disable tracking implementations in other services.
- Integrate ESLint + TypeScript with Prettier