Angular2 JQuery, how to make the document.ready function
<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>