How can i use foxTooltip with Angular?

Question

I want to import the library foxToolTip with angular.

I tried import * as foxToolTip from 'fox.tooltip.js';

but the [ts] doesn't found the module fox.tooltip.js

I installed the version : fox.tooltip.js: 1.0.13,

Answer 1

after installing it, please add it in .angular-cli.json

 "scripts": [
   "../node_modules/foxTooltip/dist/js/fox.tooltip.js", // path to your library
   ...
 ],

and declare it

import * as foxToolTip from 'fox.tooltip.js'
declare var foxToolTip: any;

Answer 2

In case of Angular 5, inside .angular-cli.json's scripts array, add the path to fox.tooltip.js

"scripts": [
    "../node_modules/fox.tooltip.js/dist/foxToolTip.min.js"
],

In case of Angular 6, inside angular.json's scripts array, add the path to fox.tooltip.js without ../

"scripts": [
    "node_modules/fox.tooltip.js/dist/foxToolTip.min.js"
],

and then, inside your Component, just declare a variable named foxToolTip like this:

declare var foxToolTip: any;

You don't need to do

import * as foxToolTip from 'fox.tooltip.js'

as your the compiler will throw an error stating that:

Cannot find module 'fox.tooltip.js'.

Just adding the script to the scripts array in .angular-cli will add it to the global scope and you'll be able to access it from your components.

Also, make sure that you call any function on it inside the ngAfterViewInit lifecycle hook method as it tries to access the DOM elements by id.