7

I have researched this topic a bit and found out about typings for libraries that need to be used for typescript. What I struggled to find is examples of usage, lets say for jquery inside an angular 2 application.

here are some questions:

1) Where would one write his jQuery code, is it inside class or inside constructor of that class?

2) Do we need to use document.ready at any point to wrap jQuery code? i.e. if we write code inside constructor is it run after this event?

few examples of usage, is one of these correct?

example 1

export class MyApp {
   constructor() {
      $('.mydiv').hide();
   }
}

example 2

export class MyApp {
   constructor() {
   }

   $('.mydiv').hide();
}

example 3

export class MyApp {
   constructor() {
   }

   $( document ).ready(function() {
     $('.mydiv').hide();
   }
}
Ilja
  • 44,142
  • 92
  • 275
  • 498

2 Answers2

10

Ideally you should wait till component content get initialized, in order to make the DOM available on which you wanted to apply jQuery. For that you need to use AfterViewInit which is one of hook of angular2 lifecycle.

You need to implement AfterViewInit on a class and write add ngAfterViewInit method to get notify whenever component content gets ready.

import { AfterViewInit } from 'angular2/core';

export class MyApp implements AfterViewInit {
   constructor() {
   }

   ngAfterViewInit(){
       //here you will have code where component content is ready.
       $('.mydiv').hide();
   } 
}
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • 1
    referring your code i tried to add `materializecss – Dimple Apr 04 '16 at 09:32
  • @Dimple could you provide me a plunkr of the same? – Pankaj Parkar Apr 04 '16 at 10:15
  • See [this](https://plnkr.co/edit/q0WlWjOONTJk9e1tSsZL?p=preview). I have added select tag since it is not getting displayed – Dimple Apr 04 '16 at 11:19
  • @Dimple You first need to make your jQuery working by adding `jQuery` typing, please refer [this answer](http://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular2) for the same – Pankaj Parkar Apr 04 '16 at 11:40
  • @Dimple look at browser in your plunkr, it clear says that. `$` is not defined..you could add question here to get other people to involve you to get helped out.. – Pankaj Parkar Apr 04 '16 at 11:49
  • Check now.. It shows select tag but still shows error and in VS it shows error `Property material_select() does not exists on type 'ElementFinder'` – Dimple Apr 04 '16 at 12:05
  • @Dimple [this plunkr](https://plnkr.co/edit/q0WlWjOONTJk9e1tSsZL?p=preview) seems working on my end – Pankaj Parkar Apr 04 '16 at 12:16
  • Yes.. But this doesn't work for datepicker. Updated Plunker. And refer [materialize](http://materializecss.com/forms.html) – Dimple Apr 04 '16 at 12:21
  • @Dimple do gather all information together & then add it as an question.. there is not meaning to have conversation in comments.. this will never gonna end then.. – Pankaj Parkar Apr 04 '16 at 12:23
0

I'm going to start by answering your second question. Yes, you should use document.ready because its intention is to wait until the DOM is loaded. If it's not loaded, your jQuery code won't work.

Now to answer your first question, once loaded, it shouldn't matter where you call jQuery.

See this.

Kody
  • 905
  • 9
  • 19
  • 2
    I'd be very surprised if Angular starts creating components before the DOM is loaded. So, I doubt we need to use `document.ready` (but I haven't researched it, so I can't state that as a fact.) – Mark Rajcok Jan 28 '16 at 22:48
  • Agreed, by using Angular it's likely the DOM is already loaded and you shouldn't need to specify `document.ready`. It should work, but would be redundant since it's already loaded. – Kody Jan 28 '16 at 23:01