title: Angular2 JQuery, how to make the document.ready function
body: <p>I could use some help in order to make the JQuery function run without any button click. Right now it only works when I have a button to click on, so the JQuery will fire. </p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>declare var jQuery: any;
  
  @Component({
  selector: 'home-component',
  providers: [],
  moduleId: module.id,
  encapsulation: ViewEncapsulation.None,
  templateUrl: 'home.component.html',
  styleUrls: ['home.component.css'],
  directives: [BannerComponent],
  })
  
  export class HomeComponent implements OnInit {
  
      constructor(public productService: ProductService, private elref: ElementRef) {
  
      }
  
      ngOnInit(): any {
          console.log("jQuery here");
          jQuery(this.elref.nativeElement).find('button').on('click', function ()          {
              jQuery('#owl-example').owlCarousel();
          });
      }
  
  }
  </code></pre>
  
  <p>This code is ofc inside a component. It finds the button, and on click, it will run the jQuery function. </p>
  
  <p>What I want is to make this line:</p>
  
  <pre><code>jQuery('#owl-example').owlCarousel();
  </code></pre>
  
  <p>Fire when the ngOnInit is called (without any button click). To do so I need to implement the JQuery:</p>
  
  <pre><code>$(document).ready(function() { }
  </code></pre>
  
  <p>The problem here is that it does not work :) What I have tried so far are this peace of code:</p>
  
  <pre><code>ngOnInit(): any {
      console.log("jQuery here");
      jQuery(this.elref.nativeElement).ready(function() {
          jQuery('#owl-example').owlCarousel();
      });
  }
  </code></pre>
  
  <p>Hope someone can help.</p>