how to import ouibounce to Angular 6

I have created a full working example on GitHub.

The highlights for your question are as follows.

In the project directory run: npm install --save ouibounce

Then to utilize it in a component, you will need to give it a reference to a dom element. The way I'm doing that is through Angular's ViewChild decorator.

In the app.component.ts file I have:

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

import * as ouibounce from 'ouibounce';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'ng-ouibounce';
  @ViewChild('modal') modal: ElementRef;

  ngAfterViewInit() {
    ouibounce(this.modal.nativeElement, { aggressive: true });
  }
}

In the app.component.html I have <div #modal class="modal">hello world!</div>

The #modal attribute gets matched when Angular creates the AppComponent and assigns its value to the modal property. This is only available at a certain point in the lifecycle of the component, which is why I'm accessing it in the ngAfterViewInit method.

I don't fully understand the ouibounce library, but outside of setting up the mouse listening events to evaluate when the mouse is going off the page, it seemingly only changes the display of the element it is given to display: block;. I have a number of styles in the styles.css file that are just there so that it is readily apparent that the library is working when you pull down the example.