2

I am trying to work out how to use jQuery with Angular 2. I have been trying to follow the example below that mentions that Angular should control the DOM and I should pass the element to jQuery.

https://stackoverflow.com/a/30662773/657477

I think I am not understanding how the @ViewChild() works.

I have a div in my component template:

<div id="screenshot">
 // ... content here
</div>

So I declare jQuery as any:

declare var $:any;

add this property:

@ViewChild('screenshot') el:ElementRef;

And then to test things out just try to call hide on it in the ngAfterViewInit():

ngAfterViewInit() {
    $(this.el.nativeElement).hide();
}

This throws the exception:

Cannot read property 'nativeElement' of undefined

So my view query is not finding the element? I checked the docs for @ViewChild and it seems to take a nested component as parameter. I think I am definitely doing somethign wrong here.

I want to be able to do various work with jQuery in the component so I need to be able to use a selector then call the jquery method.

Am I using the wrong approach? How should I pass an element to jQuery?

Community
  • 1
  • 1
Guerrilla
  • 13,375
  • 31
  • 109
  • 210

1 Answers1

4

A small change needs to be made as shown below,

<div #screenshot>          //replaced id="screenshot" by #screenshot
   // ... content here
</div>

@ViewChild('screenshot') el:ElementRef;
micronyks
  • 54,797
  • 15
  • 112
  • 146