How to use jquery in ionic 3

Question

I'm trying to load external website in a div using jquery in ionic 3.

TS:

export class HomePage 
{
  constructor(public navCtrl: NavController) {    
      $('#loadExternalURL').load('http://www.google.com');
  }
}

HTML:

<ion-content>
    <div id="loadExternalURL"></div>
</ion-content>

I'm getting blank screen on serving the ionic app. Is there anything I'm missing? Any Suggestion?

Answer 1

I did it in following way,

1. Install Jquery module in your IONIC-3 app,

   npm install jquery --save

2. Import JQuery in HomePage.ts

   import * as $ from "jquery";

3. Use $ to call jquery methods.

I wait for method ngAfterViewInit to make sure view is initialized.

ngAfterViewInit(){
    $(document).ready(function(){
        alert('JQuery is working!!');
    });
}