Angular 4 jquery doesn't work

Question

I am trying to use jquery to my Angular 4 app.I had followed all the steps to install jquery on my Angular 4.However jquery still dont work. I had put the jquery code on the component like this.

home.component.ts

import * as jQuery from 'jquery'
import { Component, OnInit } from '@angular/core';


 @Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

constructor(db: AngularFireDatabase,public authService: AuthService,public 
afAuth: AngularFireAuth,) { 
$(document).ready(function(){
  $("#showAppinfo").click(function(){
      $("#appinfo").slideToggle();
  });
});
ngOnInit()
{}
}

And my Html is the following home.component.html

    <h1>This is Home page!!</h1>
    <h2 id="showAppinfo">Basic App-info</h2>
    <ul class="list-group" id="appinfo">
      <li class="list-group-item">Publiser: {{ (appinfo | async)?.Publisher }}</li>
      <li class="list-group-item">Publication_Year: {{ (appinfo | async)?.Publication_Year }}</li>
      <li class="list-group-item">Version: {{ (appinfo | async)?.Version }}</li>
      <li class="list-group-item">Registered Users: {{ (appinfo | async)?.Rusers }}</li>
      <li class="list-group-item">Languages: {{ (appinfo | async)?.Language }}(Only)</li>
   </ul>

But nothing happens when I click on <h2 id="showAppinfo">Basic App-info</h2>. Can you tell my if I am using the jquery code in the correct place?? The problem is on code or on the jquery instalation??

are you using angular-cli? and you should have `import * as $ from 'jquery'` if you want to use it as usual — 0mpurdy, Jul 23 '17 at 21:45
I found a link which explained how to install jquery on angular 4 I did all the steps.So the code is fine and the problem is in installation?? — Vasilis Michail, Jul 23 '17 at 21:49
Yes i am using angular-cli I changed my import to `import * as $ from 'jquery' ` all I had set jquery on angular-cli.json but still dont work.. — Vasilis Michail, Jul 23 '17 at 21:53
I assume that your `angular-cli.json` has a correct path to the jquery* library? — Zze, Jul 23 '17 at 22:40
Possible duplicate of [How to use jQuery with Angular2?](https://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular2) — Kai, Jul 23 '17 at 23:30

score 2 · Answer 1 · answered Jul 23 '17 at 23:28

The basic problem is that you're trying to manipulate your template in the constructor. But when your component constructor executes, #showAppinfo and #appInfo elements don't exist yet because the view has not been built.

Operations that depend on view elements need to be performed at the earliest in the ngAfterViewInit lifecycle hook

export class HomeComponent implements OnInit, OnAfterViewInit 
...

ngAfterViewInit(){
  // do your template manipulation here
}

You can test this with something like console.log($("#showAppinfo")) and you'll see that it doesn't log any element constructor(), but it does in ngAfterViewInit()

My friend uoooww resolve my problem thak you very much – Rafael Moura Jun 04 '18 at 15:32 — Rafael Moura, Jun 04 '18 at 15:32

score 1 · Answer 2 · answered Aug 18 '17 at 04:11

Following the steps that works for me:

Install jquery npm install jquery

Install ts type npm install @types/jquery

Add jquery.min.js in your .angular-cli.json:

"scripts": [
   "../node_modules/jquery/dist/jquery.min.js"
]

Create a service to JQuery with the Token, Provider and Factory:

import { InjectionToken } from '@angular/core';
import * as $ from 'jquery';

export const JQUERY_TOKEN = new InjectionToken<JQueryStatic>('jquery');

export function jQueryFactory() {
    return $;
}

export const JQUERY_PROVIDER = { provide: JQUERY_TOKEN, useFactory: jQueryFactory };

Add the Provider in Module:

@NgModule({
  declarations: [
    ...
  ],
  providers: [
    JQUERY_PROVIDER,
    ...
  ]
})

Use DI in any component:

  constructor(
    @Inject(JQUERY_TOKEN) private $: JQueryStatic
  )

Be happy :D

this.$('body').css('background-color', 'red')

score 1 · Answer 3 · answered Sep 07 '17 at 10:35

Easiest and Shortest way possible to use jQuery in Angular 2/4

1st Step

From index.html

my-test-project\src\index.html

Type jQuery cdn below app-root tag.

...
<body>
  <app-root></app-root>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>
...

2nd Step

my-test-project\src\app\test\test.component.ts

Go to your desired components .ts script.

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

// this line will allow you to use jQuery
declare var $: any;

@Component({
  ...
})

3rd Step

my-test-project\src\app\test\test.component.ts

Test jQuery by logging 'I<3Cats' inside jQuery syntax $(() => { /* content here */ }).

export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    $(() => {
      console.log('hello there!');
    });
  }

}

You can also use this technique with other javscript libraries. I don't know if this is safe but will sure help you. quite

score 1 · Answer 4 · answered Aug 05 '19 at 16:32

i had an issue with jquery not working on bootstrap navbar and solved like this...

import { Component, OnInit, AfterViewInit, ElementRef } from '@angular/core';
//declare var $: any; //old code..

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit, AfterViewInit {

  constructor(private elem: ElementRef) { }

  ngOnInit() {
  }
  ngAfterViewInit() {
    this.elem.nativeElement.querySelectorAll('.navbar-nav>li>a').forEach((el) => {
      el.addEventListener('click', () => {
        this.elem.nativeElement.querySelector('.navbar-toggler').classList.toggle('collapsed');
        this.elem.nativeElement.querySelector('.navbar-collapse').classList.toggle('show');
      });
    })

    //old code...
    // $('.navbar-nav>li>a').on('click', function () {
    //   $('.navbar-collapse').collapse('hide');
    // });
  }

}

score 0 · Answer 5 · answered Jul 23 '17 at 22:11

0

Not sure what slideToggle() is doing, but FYI in Angular if you added #ref to h2.. you can then add

@ViewChild('ref')
h2El:Element;

in Typescript associated to the HTML. to do equivalent of $("#showAppinfo")..

If you used this in the HTML

<h2 #ref (click)="handler()">...</h2>

you'd have click handler.. so in Typescript add

handler() {
 this.h2El.slideToggle();
}

answered Jul 23 '17 at 22:11

JGFMK

8,425
4
58
92

Thanks for the answer, slideToogle() is a jquery function I tried to do the way you said but I get error on `this.h2El.slideToggle();` it Says `[ts] Property 'slideToggle' does not exist on type 'Element'..` seems like i can't use jquery on elements like this.. – Vasilis Michail Jul 23 '17 at 22:29
@Zekelonas I think `$(event.target).slideToggle();` would be more appropriate. But if you can't use Jquery at all, then this doesn't matter... – Zze Jul 23 '17 at 22:31
Element is an Interface. There are interfaces with varying levels of specificity. There is a more complete list here: https://developer.mozilla.org/en-US/docs/Web/API For example, HTMLDivElement. In Typescript you can cast variables with either of these syntaxes: elDiv as HTMLDivElement or elDiv Sometimes that gives you the ability to call a method. But I suspect JQuery is embellishing the underlying interface prototypes to add slideToggle(). So you will probably still need jQuery at some point in your code. – JGFMK Jul 24 '17 at 08:34

Cesar Saavedra · Answer 6 · 2018-01-30T18:06:38.500

0

your onInit method was inside the constructor, try it in the following way

constructor(db: AngularFireDatabase, public authService: AuthService, public afAuth: AngularFireAuth) {
    $(document).ready(function () {
        $("#showAppinfo").click(function () {
            $("#appinfo").slideToggle();
        });
    });

}
ngOnInit() { }}

edited Jan 30 '18 at 18:06

answered Jan 25 '18 at 00:07

Cesar Saavedra

1
1

1

Please edit your answer and add some explanation to your code. Code-only answers are discouraged and may be deleted. – WebDevBooster Jan 25 '18 at 00:41

Angular 4 jquery doesn't work

6 Answers6

Linked