{"id":18390443,"url":"https://github.com/codeconut-ltd/angular-snippet-collection","last_synced_at":"2025-04-12T06:58:17.986Z","repository":{"id":133669824,"uuid":"270815388","full_name":"Codeconut-Ltd/Angular-Snippet-Collection","owner":"Codeconut-Ltd","description":"Collection of components, directives and services for Angular. Handles Google Analytics custom event tracking and user preferences like colour scheme choice.","archived":false,"fork":false,"pushed_at":"2023-07-25T09:40:47.000Z","size":65,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-04-12T06:58:13.861Z","etag":null,"topics":["angular","angular-component","angular-directive","angular-directives","angular-service","angular-snippets","angular9","color-scheme","component","cookie-consent","cookieconsent","ecmascript6","event-tracking","google-analytics","javascript","js","osano","snippets","typescript","user-tracking"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Codeconut-Ltd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-08T20:21:28.000Z","updated_at":"2023-06-02T17:16:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"dcc23a16-fd26-4e3a-b04a-20f6c86ceb01","html_url":"https://github.com/Codeconut-Ltd/Angular-Snippet-Collection","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codeconut-Ltd%2FAngular-Snippet-Collection","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codeconut-Ltd%2FAngular-Snippet-Collection/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codeconut-Ltd%2FAngular-Snippet-Collection/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codeconut-Ltd%2FAngular-Snippet-Collection/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Codeconut-Ltd","download_url":"https://codeload.github.com/Codeconut-Ltd/Angular-Snippet-Collection/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248530578,"owners_count":21119595,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-component","angular-directive","angular-directives","angular-service","angular-snippets","angular9","color-scheme","component","cookie-consent","cookieconsent","ecmascript6","event-tracking","google-analytics","javascript","js","osano","snippets","typescript","user-tracking"],"created_at":"2024-11-06T01:47:47.903Z","updated_at":"2025-04-12T06:58:17.962Z","avatar_url":"https://github.com/Codeconut-Ltd.png","language":"TypeScript","readme":"![Angular Snippet Collection](teaser.png)\n\n# Angular Snippet Collection\n\n- [About](#about)\n- [Features](#features)\n- [Todo](#todo)\n\n\u003cbr\u003e\n\n---\n\n## About\n\nCollection of small helper components, directives and services that might be published in a more convenient format via NPM in the future.\n\n*Tested with Angular 8-9*\n\n\n### Setup\n\nManually copy and integrate these files in your own Angular setup.\n\nMake sure to set the correct import paths for requirements.\nSome classes need to be integrated in the main application module and component.\nWatch out for 'todo' comments where custom data is required.\n\n\n\u003cbr\u003e\u003cbr\u003e\n\n---\n\n## Features\n\n### Components\n\n#### AbstractComponent\n\nUse with view components. Applies `trackByFn` to improve list rendering performance.\n\n##### Example\n\nComponent\n\n```ts\nimport { AbstractComponent } from 'abstract.component';\n\n@Component(...)\nexport class UiNavigationFooterComponent extends AbstractComponent {\n...\n```\n\nView\n\n```html\n\u003cul\u003e\n  \u003cli *ngFor=\"let item of items; trackBy: trackByFn\"\u003e{{item.id}}\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n\u003cbr\u003e\u003cbr\u003e\n\n---\n\n### Directives\n\n#### GoogleAnalytics / TrackEventDirective\n\nAllow tracking custom events via Google Analytics.\n\n##### Requirements\n\nServices\n- GoogleAnalyticsEventsService\n\n##### Example\n\n```html\n\u003ca [appTrackEvent]=\"['UI module', 'Click', link.name, 1]\"\u003eLink\u003c/a\u003e\n```\n\n\u003cbr\u003e\u003cbr\u003e\n\n---\n\n### Services\n\n#### Cookie consent / CookieConsentService\n\nAngular 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.\n\n*Todo:* Decouple dependency, optimize display.\n\n\n##### Requirements\n\n- global.d.ts\n\nServices\n- UserTrackPreferenceService\n\nExternal\n- [CookieConsent – Osano](https://www.npmjs.com/package/cookieconsent)\n\n##### Example\n\n---\n\n#### Google Analytics / GoogleAnalyticsService\n\nEnables Google Analytics and defines a custom datalayer variable.\nRespects user opt-in from 'cookie consent'.\n\n##### Requirements\n\n- index.html\n- global.d.ts\n\nServices\n- CookieConsentService\n- GoogleAnalyticsEventsService\n\nExternal\n- [CookieConsent – Osano](https://www.npmjs.com/package/cookieconsent)\n\n\n---\n\n#### Google Analytics events / GoogleAnalyticsEventsService\n\nAllows tracking custom and navigation change events.\nCustom events can be tracked via `TrackEventDirective`.\n\n##### Example\n\n```ts\nexport class ExampleComponent {\n  constructor( private googleAnalyticsEventsService: GoogleAnalyticsEventsService ) {\n  }\n\n  track( event: any ) {\n    const eventData = ['UI module', 'Click', 'EVENT VALUE', 1];\n\n    this.googleAnalyticsEventsService.trackCustomEvent( eventData );\n  }\n}\n```\n\n---\n\n#### User colour scheme / UserColorSchemeService\n\nSet 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'.\n\n*Todo:* Move to LocalStorage instead, no need for cookies here.\n\n---\n\n#### User track preference / UserTrackPreferenceService\n\nRetrieve 'do not track signal' from user settings. Used to disable tracking implementations in other services.\n\n\u003cbr\u003e\u003cbr\u003e\n\n---\n\n## Todo\n\n- Integrate ESLint + TypeScript with Prettier\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeconut-ltd%2Fangular-snippet-collection","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeconut-ltd%2Fangular-snippet-collection","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeconut-ltd%2Fangular-snippet-collection/lists"}