ngx-ifinviewdeprecated

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

Usage no npm install needed!

<script type="module">
  import ngxIfinview from 'https://cdn.skypack.dev/ngx-ifinview';
</script>

README

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
  1. Import package in module
import { IfInViewModule } from 'ngx-ifinview';
  1. 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