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-ponent',
providers: [],
moduleId: module.id,
encapsulation: ViewEncapsulation.None,
templateUrl: 'homeponent.html',
styleUrls: ['homeponent.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();
});
}
}
This code is ofc inside a ponent. It finds the button, and on click, it will run the jQuery function.
What I want is to make this line:
jQuery('#owl-example').owlCarousel();
Fire when the ngOnInit is called (without any button click). To do so I need to implement the JQuery:
$(document).ready(function() { }
The problem here is that it does not work :) What I have tried so far are this peace of code:
ngOnInit(): any {
console.log("jQuery here");
jQuery(this.elref.nativeElement).ready(function() {
jQuery('#owl-example').owlCarousel();
});
}
Hope someone can help.
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-ponent',
providers: [],
moduleId: module.id,
encapsulation: ViewEncapsulation.None,
templateUrl: 'home.ponent.html',
styleUrls: ['home.ponent.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();
});
}
}
This code is ofc inside a ponent. It finds the button, and on click, it will run the jQuery function.
What I want is to make this line:
jQuery('#owl-example').owlCarousel();
Fire when the ngOnInit is called (without any button click). To do so I need to implement the JQuery:
$(document).ready(function() { }
The problem here is that it does not work :) What I have tried so far are this peace of code:
ngOnInit(): any {
console.log("jQuery here");
jQuery(this.elref.nativeElement).ready(function() {
jQuery('#owl-example').owlCarousel();
});
}
Hope someone can help.
Share Improve this question edited Apr 21, 2017 at 13:44 marc_s 755k184 gold badges1.4k silver badges1.5k bronze badges asked Jul 29, 2016 at 8:56 MikkelMikkel 1,81111 gold badges37 silver badges62 bronze badges 5-
1
jQuery('#owl-example').owlCarousel();you should never do such things. – dfsq Commented Jul 29, 2016 at 9:00 - And why should I not do that? – Mikkel Commented Jul 29, 2016 at 9:03
- 1 Because you hardcoded CSS selector, not flexible. – dfsq Commented Jul 29, 2016 at 9:06
- You mean the Id?.. maybe I should make a class or something for all the carousels :)? – Mikkel Commented Jul 29, 2016 at 9:13
- No, you should never need to use CSS selectors at all. It's the same anti-pattern as manipulating DOM in controller in Angular1. Now you ponent code is coupled to HTML, which is bad. – dfsq Commented Jul 29, 2016 at 9:15
3 Answers
Reset to default 8I would guess that on ngOnInit the element with id #owl-example does not exists yet, because it is in the same ponent 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 ponent exists in the document.
You can write this code within ngAfterViewInit hook
ngAfterViewInit(){
jQuery('#owl-example').owlCarousel();
}
I did it and it works!
import { Component, OnInit, AfterViewInit } from '@angular/core';
declare var jQuery: any;
@Component({
selector: 'app-banners',
templateUrl: './banners.ponent.html',
styleUrls: ['./banners.ponent.css']
})
export class BannersComponent implements AfterViewInit {
ngAfterViewInit(): void {
jQuery('.slider').slider({full_width: true});
}
constructor() { }
ngOnInit() {
}
}