NgxFixedFooter

Angular directive that adds fixed footer without overlap

✓ Angular 13, Ivy and SSR 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

  import { NgxFixedFooterModule } from 'ngx-fixed-footer';

  @NgModule({
   // ...
   imports: [
     // ...
     NgxCutModule.forRoot({
      containerSelector: '[role="main"]',
      cssAttribute: 'padding'
     })
   ]
  })

  // or

  @NgModule({
   // ...
   imports: [
     // ...
     NgxFixedFooterModule
   ]
  })

Compatibility

Angular	ngx-fixed-footer	Install
>= 12	1.x	yarn add ngx-fixed-footer
>= 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 - 2022 Dominik Hladik

All contents are licensed under the MIT license.