CODEWITHSUNDEEP
javascriptangularangular-cli
John Rousseau
John Rousseau

Reputation: 93

Import js component into Angular 5

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!

Upvotes: 4

Views: 346

Answers (1)

Anshuman Jaiswal
Anshuman Jaiswal

Reputation: 5462

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>

Upvotes: 1

Related Questions