ngx-(if)InView

An angular directive for detecting element location within client window. This was built on Angular 6.1.0.

Getting Started

1. Install package

npm install ngx-ifinview --save

2. Import package in module

import { IfInViewModule } from 'ngx-ifinview';

3. 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">
• offset User defined offset in pixels between element and entry point.
  • Typeof Number
  • <div class="card" ifInView add-classes="fade-in" offset=150>
• 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">
• (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)">
• id Can be used to differentiate which directive was triggered on a page.
  • Typeof String
  • <div id="trig1" class="card" ifInView (trigger)="onEmit($event)">

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