https://github.com/ahaw/ngx-hideable-header
Hideable (or sticky) header directive for Angular.
https://github.com/ahaw/ngx-hideable-header
angular angular2 angular6 angular7
Last synced: 9 months ago
JSON representation
Hideable (or sticky) header directive for Angular.
- Host: GitHub
- URL: https://github.com/ahaw/ngx-hideable-header
- Owner: ahaw
- License: mit
- Created: 2018-08-17T08:53:21.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-09-06T08:41:52.000Z (over 7 years ago)
- Last Synced: 2025-07-05T22:04:39.796Z (10 months ago)
- Topics: angular, angular2, angular6, angular7
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ngx-hideable-header
- Size: 303 KB
- Stars: 6
- Watchers: 0
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hideable Header for Angular 2+ with Universal support
Hideable Header is a directive for Angular that provides and easy and convenient API to add to any header element giving you full control
to show and hide it.
The default behaviour is that the element will hide once you have scrolled passed a distance equal to the height of your header. Scrolling up
the header will reappear. You can also reverse this functionality and have headers be default by hidden and visible on scroll (useful for utility bars)
### Installation
Add the NPM package to your project
```
npm install ngx-hideable-header
```
## Usage
The HideableHeaderModule should be imported into any module you want to use it in. This will provide the `hideableHeader` directive to use in your components.
```typescript
import { HideableHeaderModule } from 'ngx-hideable-header';
@NgModule({
...
imports: [
BrowserModule,
HideableHeaderModule,
]
...
})
export class AppModule {}
```
### Directive Use
Attach the directive to any header component you want to be hidable. The directive has some configuration attributes:
- `[scrollAt]=`: Property to start hiding the element at, the default is 2 x the height of the component clientHeight.
- `[transition]="1s linear"`: Property defining the transition of the animation. This property supports all transition types via sanitization.
- `[disable]=false`: This property stops the default behaviour of the directive.
- `[reverse]=false`: This property will reverse when the show/hide triggers, useful for things you would like to appear after the user scrolls.
- `[height]=`: Property to overide the height of the transition
- `[units]="px"`: Property to define the style of units for transition
There are also some style properties set to the host element of this directive. You can change these with element attributes:
- `[style.position]="fixed"`
- `[style.top]="0"`
- `[style.left]="0"`
```html
```
### Public API
The directive instance has two methods that can be called, and two `Observable` properties that can be subscribed to:
#### Methods
- `instance.hide()` - Hides the element the directive is bound to.
- `instance.show()` - Shows the element the directive is bound to.
### Subscriptions
- `instance.viewProperties` - An object containing properties used in the directive
- `instance.isHidden` - A boolean value available to show what state the attached element is in.
To see how you use these in your code, check out the demo application and how to use `ViewChild` in your components.
## Demos
To see an online demo, visit https://ngx-hideable-header.firebaseapp.com. You can also run a local demo by cloning this repo and typing the following;
```bash
> npm install
> npm run start
```