title: how to use jquery-ui in angular 6
body: <p>I have tried number of methods posted on StackOverflow to use <strong>jquery-ui</strong> in <strong>angular 6</strong> component but none of them worked. For example,</p>
  
  <ol>
  <li><p>I ran <strong>npm install jquery jquery-ui</strong> to install jquery and jquery-ui.</p></li>
  <li><p>Included following in angular.json</p>
  
  <p>"scripts": [
    "node_modules/jquery/dist/jquery.js",
    "node_modules/jquery-ui-dist/jquery-ui.js",</p></li>
  </ol>
  
  <p><strong>Error is as follows:</strong></p>
  
  <pre><code>AppComponent_Host.ngfactory.js [sm]:1ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_1__(...).slider is not a function
      at AppComponent.push../src/app/app.component.ts.AppComponent.ngAfterContentInit (http:||localhost:4200/main.js:154:56)
      at callProviderLifecycles (http:||localhost:4200/vendor.js:42663:18)
      at callElementProvidersLifecycles (http:||localhost:4200/vendor.js:42644:13)
      at callLifecycleHooksChildrenFirst (http:||localhost:4200/vendor.js:42634:29)
      at checkAndUpdateView (http:||localhost:4200/vendor.js:43565:5)
      at callWithDebugContext (http:||localhost:4200/vendor.js:44454:25)
      at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http:||localhost:4200/vendor.js:44132:12)
      at ViewRef_.push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges (http:||localhost:4200/vendor.js:41948:22)
      at http:||localhost:4200/vendor.js:37684:63
      at Array.forEach (native)
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;Car Dealer&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;div id="slider"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component, AfterContentInit } from '@angular/core';
  import * as $ from 'jquery';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements AfterContentInit {
    title = 'MDK';
  
    ngAfterContentInit() {
      $( "#slider" ).slider({
        range: true,
        values: [ 17, 67 ]
      });
    }
  }
  </code></pre>
  
  <p>Another post suggested that I <strong>should not use</strong> angular.json of angular 6 at all but use index.html to include scripts but it also did not worked.</p>
  
  <p>I included following in index.html but even then same error appeared</p>
  
  <pre><code>&lt;script src="https://code.jquery.com/jquery-2.2.4.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  </code></pre>