Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ajaysinghj8/angular-inport
Angular In View Port Detector
https://github.com/ajaysinghj8/angular-inport
angular angular2 angular4 inport inviewport viewport
Last synced: 21 days ago
JSON representation
Angular In View Port Detector
- Host: GitHub
- URL: https://github.com/ajaysinghj8/angular-inport
- Owner: ajaysinghj8
- Created: 2017-03-13T17:49:55.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T02:18:09.000Z (almost 2 years ago)
- Last Synced: 2024-04-14T05:56:29.737Z (7 months ago)
- Topics: angular, angular2, angular4, inport, inviewport, viewport
- Language: TypeScript
- Homepage:
- Size: 2.21 MB
- Stars: 34
- Watchers: 6
- Forks: 18
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Angular In Port / Angular In View Port
## Installation
- `npm i -S angular-inport`
- `yarn add angular-inport`
## Importing module
```js
import { NgInviewModule } from 'angular-inport';
@NgModule({
imports: [
// ...
NgInviewModule
],
declarations: [YourAppComponent],
exports: [YourAppComponent],
bootstrap: [YourAppComponent],
})
```
#### Basic Usages
```html
```
#### Advanced Usages
```html
.......
```
## InviewContainer and InviewItem Directive
#### Basic Usages
```html
.......
```
#### Advanced Usages
```html
.......
```
#### InView Props
* `(inview)`: inview event, it will keep to emitting the event on scroll.
* `[offset]`: offset value can be provided as [top, right, bottom, left] or [top/bottom, left/right] or [top/bottom/left/right]
* `[viewPortOffset]` : offset value from an element or window port.
* `[trigger]`: An Observable ex. BehaviorSubject can be passed to trigger (inview) event.
* `[scrollELement]`: element to check if the content is available in view port with in the element 's view port. default value is window.
* `[data]`: data property can be used to identify the in-view event source, when you have multiple in-view directives in a page attached to same in-view handler.
* `[lazy]`: default false, set true when you want in-view event to trigger only on visibility of that content. will not trigger when content goes out of view port.
* `[tooLazy]`: default false, set true when you want in-view event to trigger only when visibility state changes.
* `[triggerOnInit]`: default false, set true when you want in-view event to get triggered on element load otherwise it will trigger only on scroll event.
#### InViewContainer Props
* `(inview)`: inview event, it will keep to emitting the event on scroll.
* `[offset]`: offset value can be provided as [top, right, bottom, left] or [top/bottom, left/right] or [top/bottom/left/right]
* `[viewPortOffset]` : offset value from an element or window port.
* `[scrollWindow]`: default true uses window scroll to check inview status, set false to check from container's scroll.
* `[bestMatch]` : will return only the centered element from other element. Please check example.
* `[triggerOnInit]`: default false, set true when you want in-view event to get triggered on element load otherwise it will trigger only on scroll event.