README
ngx-(if)InView
An angular directive for detecting element location within client window. This was built on Angular 6.1.0.
Getting Started
- Install package
npm install ngx-ifinview --save
- Import package in module
import { IfInViewModule } from 'ngx-ifinview';
- Declare module
imports: [IfInViewModule]
Basic Use
Minimum definition
The element you want to watch needs the base directive and a definition for the type of trigger you want to use. You can either assign classes to the element when triggered, or trigger a function:
<div class="card" ifInView add-classes="triggered">...</div>
-or-<div class="card" ifInView (trigger)="onEmit($event)">...</div>
Attributes
add-classes
A string list of CSS classes to be added to host element, delimited by spaces. Can be used with or without trigger function.- Typeof
String
<div class="static-class" ifInView add-classes="class-one class-two">
- Typeof
offset
User defined offset in pixels between element and entry point.- Typeof
Number
<div class="card" ifInView add-classes="fade-in" offset=150>
- Typeof
entry-point
Specifies point of entry in regards to client window. Top of window, middle of window, bottom of window. Defaults to top.- Typeof
"top"|"middle"|"bottom"
<p class="quote" ifInView entry-point="middle" add-classes="italicize">
- Typeof
(trigger)
A function to be called when directive is triggered. Can be used with or without classes.- Typeof
EventEmitter<{value:boolean, name?:string}>
<div class="box" ifInView (trigger)="onEmit($event)">
- Typeof
id
Can be used to differentiate which directive was triggered on a page.- Typeof
String
<div id="trig1" class="card" ifInView (trigger)="onEmit($event)">
- Typeof
Development
git clone https://github.com/baxelson12/ngx-ifinview.git
cd ngx-ifinview
npm i
ng build ifInView
ng serve
Questions? Comments?
If you have suggestions or run into issues, please feel free to post an issue on GitHub and I will try my best to assist you.
-Brad