# inaxInView Directive for Angular

Check if a DOM element is visible or not in the browser current visible viewport.
Emits "onInView"-event when visibility state changes.

Work is based on the inView-attribute for AngularJS (1) by Nicola Peduzzi.

https://github.com/thenikso/angular-inview


**This is a directive for Angular 2**

## Usage

```html
<p [inaxInView]="'myId'" [inaxInViewOptions]="{offset: [0, 0, 0, 0], viewportOffset: 0}" (onInView)="inView($event)">Am I In View?</p>
```

## inaxInView

An identifier can be assigned to the `inaxInView` attribute. It is part of the event object (see below) and can be used to identify the element.  
`inaxInViewptions` is optional (see below).   
The event `onInView` is fired each time the visibility state or (if enabled) the directions changed.

**In most cases (if not always!) the first event may signal, that the element is visible, although it won't be visible, when the page was fully rendered by Angular. In this case, a correct successive "invisible" event will be fired.**

## $event
The event object is of type "InViewInfo".
  ```
  export class InViewInfo {
    public id: string;
    public inView: boolean = false;
    public changed: boolean = false;
    public element: ElementRef;
    public elementRect: Rect;
    public viewportRect: Rect;
    public directionVertical: number;
    public directionHorizontal: number;
}
```
with Rect defined as 
```
export class Rect {
    public left: number;
    public top: number;
    public right: number;
    public bottom: number;
    public width: number;  // read-only
    public height: number; // read-only

    constructor(left: number, top: number, width: number, height: number);
    public offsetRect(offset: any): Rect;
    public intersectRect(otherRect: Rect);
}
```
- `id` equals the assigned if when defining the attribute
- `inview` indicates if the DOM element is in view
- `changed` indicates if the inview value changed with this event
- `element` the DOM element subject of the inview check
- `elementRect` a rectangle with the virtual (considering offset) position of
    the element used for the inview check
- `viewportRect` a rectangle with the virtual (considering offset) viewport
    dimensions used for the inview check
- `directionHorizontal/directionVertical` an indication of how the element has moved from the last event
    relative to the viewport. Ie. if you scoll the page down by 100 pixels, the
    value of `directionVertical` will be `-100`


## inViewOptions

An additional attribute `inViewOptions` can be specified with an object value containing:

- `offset`: An expression returning an array of values to offset the element position.

  Offsets are expressed as arrays of 4 values `[top, right, bottom, left]`.
  Like CSS, you can also specify only 2 values `[top/bottom, left/right]`.

  Values can be either a string with a percentage or numbers (in pixel).
  Positive values are offsets outside the element rectangle and
  negative values are offsets to the inside.

  Example valid values for the offset are: `100`, `[200, 0]`,
  `[100, 0, 200, 50]`, `'20%'`, `['50%', 30]`

- `viewportOffset`: Like the element offset but appied to the viewport. You may
  want to use this to shrink the virtual viewport effectivelly checking if your
  element is visible (i.e.) in the bottom part of the screen `['-50%', 0, 0]`.

- `generateDirection`: Indicate if the `directionHrizontal/directionVertical` information should
  be included in `inViewInfo` (default false).