NgxFixedFooter

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.