Angular directive that adds fixed footer without overlap

✓ Angular 17 compatible

Here's the demo or stackblitz live preview or codesandbox live preview

• Lightweight
• No dependencies!
• Directive way

Install

1. Use yarn (or npm) to install the package

yarn add ngx-fixed-footer

2. 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
        ]
     })

Compatibility

| Angular | ngx-fixed-footer | Install | | --------- | ---------------- | ----------------------------- | | >= 14 | 2.x | yarn add ngx-fixed-footer | | >= 12 | 1.x | yarn add ngx-fixed-footer@1 | | >= 5 < 13 | 0.x | yarn add ngx-fixed-footer@0 |

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' |

Dependencies

None

License

Copyright © 2021 - 2024 Dominik Hladik

All contents are licensed under the MIT license.