{"id":20538258,"url":"https://github.com/celtian/ngx-fixed-footer","last_synced_at":"2025-04-14T07:50:39.500Z","repository":{"id":40310672,"uuid":"367707847","full_name":"Celtian/ngx-fixed-footer","owner":"Celtian","description":"Angular directive that adds fixed footer without overlap","archived":false,"fork":false,"pushed_at":"2025-04-13T21:57:48.000Z","size":2744,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-13T22:37:39.219Z","etag":null,"topics":["angular","library"],"latest_commit_sha":null,"homepage":"https://celtian.github.io/ngx-fixed-footer","language":"TypeScript","has_issues":true,"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/Celtian.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-05-15T18:50:14.000Z","updated_at":"2025-04-13T21:56:25.000Z","dependencies_parsed_at":"2023-12-26T22:29:48.055Z","dependency_job_id":"52c270ef-b16b-4661-929e-d41cb580beed","html_url":"https://github.com/Celtian/ngx-fixed-footer","commit_stats":{"total_commits":55,"total_committers":1,"mean_commits":55.0,"dds":0.0,"last_synced_commit":"8dd3b91adc086a69d2def4b983c536337bbfd653"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Celtian%2Fngx-fixed-footer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Celtian%2Fngx-fixed-footer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Celtian%2Fngx-fixed-footer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Celtian%2Fngx-fixed-footer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Celtian","download_url":"https://codeload.github.com/Celtian/ngx-fixed-footer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248844047,"owners_count":21170486,"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","library"],"created_at":"2024-11-16T00:46:04.493Z","updated_at":"2025-04-14T07:50:39.491Z","avatar_url":"https://github.com/Celtian.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/Celtian/ngx-fixed-footer\" target=\"blank\"\u003e\u003cimg src=\"assets/logo.svg?sanitize=true\" alt=\"\" width=\"120\"\u003e\u003c/a\u003e\n  \u003ch1 align=\"center\"\u003eNgxFixedFooter\u003c/h1\u003e\n\u003c/p\u003e\n\n[![npm version](https://badge.fury.io/js/ngx-fixed-footer.svg)](https://badge.fury.io/js/ngx-fixed-footer)\n[![Package License](https://img.shields.io/npm/l/ngx-fixed-footer.svg)](https://www.npmjs.com/ngx-fixed-footer)\n[![NPM Downloads](https://img.shields.io/npm/dm/ngx-fixed-footer.svg)](https://www.npmjs.com/ngx-fixed-footer)\n[![Snyk](https://snyk.io/advisor/npm-package/ngx-fixed-footer/badge.svg)](https://snyk.io/advisor/npm-package/ngx-fixed-footer)\n[![codecov](https://codecov.io/gh/Celtian/ngx-fixed-footer/branch/master/graph/badge.svg?token=1IRUKIKM0D)](https://codecov.io/gh/celtian/ngx-fixed-footer/)\n[![stars](https://badgen.net/github/stars/celtian/ngx-fixed-footer)](https://github.com/celtian/ngx-fixed-footer/)\n[![forks](https://badgen.net/github/forks/celtian/ngx-fixed-footer)](https://github.com/celtian/ngx-fixed-footer/)\n[![HitCount](http://hits.dwyl.com/celtian/ngx-fixed-footer.svg)](http://hits.dwyl.com/celtian/ngx-fixed-footer)\n\n\u003e Angular directive that adds fixed footer without overlap\n\n\u003e ✓ _Angular 19 compatible_\n\nHere's the [demo](http://celtian.github.io/ngx-fixed-footer/) or [stackblitz live preview](https://stackblitz.com/edit/ngx-fixed-footer) or [codesandbox live preview](https://codesandbox.io/s/ngx-fixed-footer-m4f21)\n\n- Lightweight\n- No dependencies!\n- Directive way\n\n## 🛠️ Install\n\n1. Use yarn (or npm) to install the package\n\n```terminal\nyarn add ngx-fixed-footer\n```\n\n2. Add NgxFixedFooterModule into your module `imports`\n\n   2.1. import providers (optional)\n\n   ```typescript\n     import { provideFixedFooter } from 'ngx-fixed-footer';\n\n     export const appConfig: ApplicationConfig = {\n       providers: [\n         // ...\n         provideFixedFooter({\n           containerSelector: '[data-something]',\n           cssAttribute: 'margin'\n         })\n       ]\n     };\n\n     // or\n\n     import { provideFixedFooter } from 'ngx-fixed-footer';\n\n     @NgModule({\n      // ...\n      imports: [\n        // ...\n        provideFixedFooter({\n          containerSelector: '[data-something]',\n          cssAttribute: 'margin'\n        })\n      ]\n     })\n\n   ```\n\n   2.2 import directive\n\n   ```typescript\n     import { NgxFixedFooterDirective } from 'ngx-fixed-footer';\n\n     @Component({\n        standalone: true,\n        imports: [\n          // ...\n          NgxFixedFooterDirective\n        ]\n     })\n\n     // or\n\n     import { NgxFixedFooterDirective } from 'ngx-fixed-footer';\n\n     @NgModule({\n        // ...\n        imports: [\n          // ...\n          NgxFixedFooterDirective\n        ]\n     })\n   ```\n\n## 🚀 Quick start\n\n### Example code\n\n```html\n\u003cdiv role=\"main\"\u003e...some content here\u003c/div\u003e\n\u003cdiv ngxFixedFooter [containerSelector]=\"[role='main']\" [cssAttribute]=\"'padding'\"\u003e... some content here\u003c/div\u003e\n```\n\n### Result\n\n```html\n\u003cdiv role=\"main\" style=\"padding-bottom: {{ /* dynamic height of footer */ }}\"\u003e...some content here\u003c/div\u003e\n\u003cdiv ngxFixedFooter [containerSelector]=\"[role='main']\" [cssAttribute]=\"'padding'\"\u003e... some content here\u003c/div\u003e\n```\n\n## 🛠️ Options\n\n### Root options\n\n_Module can be configured globally._\n\n| Option                | Type                  | Default         | Description                                     |\n| --------------------- | --------------------- | --------------- | ----------------------------------------------- |\n| **containerSelector** | string                | '[role=\"main\"]' | Css selector used for additional padding/margin |\n| **cssAttribute**      | 'margin' or 'padding' | 'padding'       | Css attribute used on 'containerSelector'       |\n\n### Directive\n\n_Each directive can override global options._\n\n| Option                  | Type                  | Default                       | Description                                     |\n| ----------------------- | --------------------- | ----------------------------- | ----------------------------------------------- |\n| **[containerSelector]** | string                | value taken from root options | Css selector used for additional padding/margin |\n| **[cssAttribute]**      | 'margin' or 'padding' | value taken from root options | Css attribute used on 'containerSelector'       |\n\n## 🔧 Compatibility\n\n| Angular   | ngx-fixed-footer | Install                       |\n| --------- | ---------------- | ----------------------------- |\n| \u003e= 18     | 3.x              | `yarn add ngx-fixed-footer`   |\n| \u003e= 14     | 2.x              | `yarn add ngx-fixed-footer@2` |\n| \u003e= 12     | 1.x              | `yarn add ngx-fixed-footer@1` |\n| \u003e= 5 \u003c 13 | 0.x              | `yarn add ngx-fixed-footer@0` |\n\n## 📦 Dependencies\n\n_None_\n\n## 🪪 License\n\nCopyright \u0026copy; 2021 - 2025 [Dominik Hladik](https://github.com/Celtian)\n\nAll contents are licensed under the [MIT license].\n\n[mit license]: LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fceltian%2Fngx-fixed-footer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fceltian%2Fngx-fixed-footer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fceltian%2Fngx-fixed-footer/lists"}