How to use jQuery Plugin with Angular 4?

angular, jquery

Solution

Yes you can use jquery with Angular 4

Steps:

1) In `index.html` put below line in tag.

`<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>`

2) In component ts file below you have to declare var like this

import { Component } from '@angular/core';
declare var jquery:any;
declare var $ :any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular 4 with jquery';
  toggleTitle(){
    $('.title').slideToggle(); //
  }

}

And use this code for corresponding html file like this:

<h1 class="title" style="display:none">
  {{title}}
</h1>
<button (click)="toggleTitle()"> clickhere</button>

This will work for you. Thanks

Problem

I want to use a range slider in an angular project and I tried using one available module for angular 4. It works fine during compilation but when I try to build it for deployment, it throws the below error. I checked for the option of using jQuery plugin directly in the angular project and I'm only getting options for doing it in Angular 2. Is there any way we can use jQuery plugins in Angular 4? Please let me know.

Original source