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.
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("Jqeuery here");
jQuery(this.elref.nativeElement).find('button').on('click', function () {
jQuery('#owl-example').owlCarousel();
});
}
}
jQuery('#owl-example').owlCarousel();
$(document).ready(function() { }
ngOnInit(): any {
console.log("Jqeuery here");
jQuery(this.elref.nativeElement).ready(function() {
jQuery('#owl-example').owlCarousel();
});
}
I would guess that on ngOnInit
the element with id #owl-example
does not exists yet, because it is in the same component as where the ngOnInit
gets called. You have to use the ngAfterViewInit
function:
ngAfterViewInit(): void {
jQuery('#owl-example').owlCarousel();
}
You can then be sure that any element in your component exists in the document.