How to use custom jquery codes in angular 6 project?

Question

This is a jquery code in my HTML template. I am using a HTML template and sliced it to different components and created an angular project.

   //  class add mouse hover
   jQuery('.custom-nav > li').hover(function(){
      jQuery(this).addClass('nav-hover');
   }, function(){
      jQuery(this).removeClass('nav-hover');
   });

This code is not working.

The file is saved in a folder named assets inside node_modules as scripts_custom.js. The file is included in angular.json.

I am new to angular6. Please do help me to correct it.

Thanks for the comment @CruelEngine . Actually am new to angular6. I just copied the js page to node modules and tried. Could you please give me a hind to convert this? — Raru Chempazhanthy
– Raru Chempazhanthy, Commented Jan 8, 2019 at 6:19
Using JQuery in Angular is like equipping a ship with wheels: you can, but it doesn't mean it's useful. Maybe the movement of wheel will make your ship run, but maybe it's not how it's been designed to work — Christian Vincenzo Traina
– Christian Vincenzo Traina, Commented Jan 8, 2019 at 10:22

Ankur Shah · Accepted Answer · 2019-01-08 06:41:12Z

2

It not a good practice to include jquery in angular project but still you want to use it you can write declare $ any in component file after all import section

Please let me know if it solves your problem

answered Jan 8, 2019 at 6:41

Ankur Shah

4306 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thomsheer Ahamed · Accepted Answer · 2019-01-08 07:39:01Z

1

I agree with @Ankur Shah it is not good practice to use Jquery in an angular project. Instead, you can use a custom directive or use (mouseenter) and (mouseleave) event.

Check the link below toggleclass

answered Jan 8, 2019 at 7:39

Thomsheer Ahamed

1831 silver badge10 bronze badges

Comments

Sneha Pawar · Accepted Answer · 2019-01-08 09:47:04Z

1

To include jQuery code into your component do the following steps:

step 1: Add jQuery into your index.html

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

step 2: Declare jQuery into your component where you want to add that code as follows

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';
  //Add jQuery here
}

Hope this will work for you. Thanks

edited Jan 8, 2019 at 9:47

answered Jan 8, 2019 at 8:49

Sneha Pawar

1,1376 silver badges14 bronze badges

Comments

Raru Chempazhanthy · Accepted Answer · 2019-01-09 10:16:27Z

1

This video helped me to solve the issue.

https://www.youtube.com/watch?v=IlgsWcYnPdo

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'frontend';
  ngOnInit(){
    $(document).ready(function(){
    //  class add mouse hover
    jQuery('.custom-nav > li').hover(function(){
      jQuery(this).addClass('nav-hover');
      }, function(){
        jQuery(this).removeClass('nav-hover');
      });
    });
  }
}

Hope this is a good way to solve it. Thanks all.

answered Jan 9, 2019 at 10:16

Raru Chempazhanthy

671 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to use custom jquery codes in angular 6 project?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related