Import js component into Angular 5

Question

I'm new to Angular and still trying to learn the technology. I have an Angular 5 app that I want to use a JS component in. This is probably a more general question, but here are my specifics.

Setup: VS Code, Angular 5 Component: http://seiyria.com/bootstrap-slider/

I installed it using npm install bootstrap-slider. I can see the files in the node_modules folder.

I included the CSS and JS files in the angular-cli.json file:

  "styles": [
    "../node_modules/bootstrap-slider/dist/css/bootstrap-slider.min.css"
  ],
  "scripts": [
    "../node_modules/bootstrap-slider/dist/bootstrap-slider.min.js"
  ],

I can use the HTML tag in my component.html:

 <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>

When I put the JS snippet in the component.ts file, I get an error.

    var slider = new Slider('#ex1', {
  formatter: function(value) {
    return 'Current value: ' + value;
  }
});

Error: Cannot find name 'Slider'.

I don't think that I need to use an import statement and from what I've researched, it doesn't look like I should include the JS or the CSS in the component.html file.

Any help is appreciated!

Anshuman Jaiswal · Accepted Answer · 2018-06-02T02:08:04.843

1

Add Slider in component as:

import { Component } from '@angular/core';
...
declare var Slider: any;
...
@Component({
...

Update 1:

Add js in index.html as:

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.2/bootstrap-slider.min.js"></script>
</head>

edited Jun 02 '18 at 02:08

answered Jun 01 '18 at 20:53

Anshuman Jaiswal

5,352
1
29
46

So, that will eliminate the compiler error, but the JS code doesn't run. It seems to me like the component doesn't know what a Slider is... or more specifically, what THE slider object is referencing. It's in the .angular-cli.json both in the scripts and styles section. – John Rousseau Jun 01 '18 at 22:22
@JohnRousseau Updated the answer you will have to add `js` in HTML. You can also check here: https://stackblitz.com/edit/bootstrap-slider – Anshuman Jaiswal Jun 02 '18 at 02:10

Import js component into Angular 5

1 Answers1