Awesome

Angular directive that adds fixed footer without overlap

✓ Angular 18 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
        ]
     })
   

🚀 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.

Directive

Each directive can override global options.

🔧 Compatibility

📦 Dependencies

None

🪪 License

Copyright © 2021 - 2024 Dominik Hladik

All contents are licensed under the MIT license.