Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Celtian/ngx-fixed-footer
Angular directive that adds fixed footer without overlap
https://github.com/Celtian/ngx-fixed-footer
angular library
Last synced: 1 day ago
JSON representation
Angular directive that adds fixed footer without overlap
- Host: GitHub
- URL: https://github.com/Celtian/ngx-fixed-footer
- Owner: Celtian
- License: mit
- Created: 2021-05-15T18:50:14.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-10-17T18:55:49.000Z (30 days ago)
- Last Synced: 2024-10-20T04:31:43.766Z (27 days ago)
- Topics: angular, library
- Language: TypeScript
- Homepage: https://celtian.github.io/ngx-fixed-footer
- Size: 2.08 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- fucking-awesome-angular - ngx-fixed-footer - Angular directive that adds fixed footer without overlap. (Table of contents / Third Party Components)
- awesome-angular - ngx-fixed-footer - Angular directive that adds fixed footer without overlap. (Table of contents / Third Party Components)
README
NgxFixedFooter
[](https://badge.fury.io/js/ngx-fixed-footer)
[](https://www.npmjs.com/ngx-fixed-footer)
[](https://www.npmjs.com/ngx-fixed-footer)
[](https://snyk.io/advisor/npm-package/ngx-fixed-footer)
[](https://codecov.io/gh/celtian/ngx-fixed-footer/)
[](https://github.com/celtian/ngx-fixed-footer/)
[](https://github.com/celtian/ngx-fixed-footer/)
[](http://hits.dwyl.com/celtian/ngx-fixed-footer)
> Angular directive that adds fixed footer without overlap
> ✓ _Angular 18 compatible_
Here's the [demo](http://celtian.github.io/ngx-fixed-footer/) or [stackblitz live preview](https://stackblitz.com/edit/ngx-fixed-footer) or [codesandbox live preview](https://codesandbox.io/s/ngx-fixed-footer-m4f21)
- Lightweight
- No dependencies!
- Directive way
## 🛠️ Install
1. Use yarn (or npm) to install the package
```terminal
yarn add ngx-fixed-footer
```
2. Add NgxFixedFooterModule into your module `imports`
2.1. import providers (optional)
```typescript
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
```typescript
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
```html
...some content here
... some content here
```
### Result
```html
...some content here
... some content here
```
## 🛠️ 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](https://github.com/Celtian)
All contents are licensed under the [MIT license].
[mit license]: LICENSE