ngx-fixed-footer
v3.1.0
Published
Angular directive that adds fixed footer without overlap
Downloads
92
Maintainers
Readme
Angular directive that adds fixed footer without overlap
✓ Angular 19 compatible
Here's the demo or stackblitz live preview or codesandbox live preview
- Lightweight
- No dependencies!
- Directive way
🛠️ Install
- Use yarn (or npm) to install the package
yarn add ngx-fixed-footer
Add NgxFixedFooterModule into your module
imports
2.1. import providers (optional)
import { provideFixedFooter } from 'ngx-fixed-footer'; export const appConfig: ApplicationConfig = { providers: [ // ... provideFixedFooter({ containerSelector: '[data-something]', cssAttribute: 'margin' }) ] }; // or import { provideFixedFooter } from 'ngx-fixed-footer'; @NgModule({ // ... imports: [ // ... provideFixedFooter({ containerSelector: '[data-something]', cssAttribute: 'margin' }) ] })
2.2 import directive
import { NgxFixedFooterDirective } from 'ngx-fixed-footer'; @Component({ standalone: true, imports: [ // ... NgxFixedFooterDirective ] }) // or import { NgxFixedFooterDirective } from 'ngx-fixed-footer'; @NgModule({ // ... imports: [ // ... NgxFixedFooterDirective ] })
🚀 Quick start
Example code
<div role="main">...some content here</div>
<div ngxFixedFooter [containerSelector]="[role='main']" [cssAttribute]="'padding'">... some content here</div>
Result
<div role="main" style="padding-bottom: {{ /* dynamic height of footer */ }}">...some content here</div>
<div ngxFixedFooter [containerSelector]="[role='main']" [cssAttribute]="'padding'">... some content here</div>
🛠️ Options
Root options
Module can be configured globally.
| Option | Type | Default | Description | | --------------------- | --------------------- | --------------- | ----------------------------------------------- | | containerSelector | string | '[role="main"]' | Css selector used for additional padding/margin | | cssAttribute | 'margin' or 'padding' | 'padding' | Css attribute used on 'containerSelector' |
Directive
Each directive can override global options.
| Option | Type | Default | Description | | ----------------------- | --------------------- | ----------------------------- | ----------------------------------------------- | | [containerSelector] | string | value taken from root options | Css selector used for additional padding/margin | | [cssAttribute] | 'margin' or 'padding' | value taken from root options | Css attribute used on 'containerSelector' |
🔧 Compatibility
| Angular | ngx-fixed-footer | Install |
| --------- | ---------------- | ----------------------------- |
| >= 18 | 3.x | yarn add ngx-fixed-footer
|
| >= 14 | 2.x | yarn add ngx-fixed-footer@2
|
| >= 12 | 1.x | yarn add ngx-fixed-footer@1
|
| >= 5 < 13 | 0.x | yarn add ngx-fixed-footer@0
|
📦 Dependencies
None
🪪 License
Copyright © 2021 - 2024 Dominik Hladik
All contents are licensed under the MIT license.