generator-ng2-webpack
generator-ng2-webpack copied to clipboard
The jJQuery plugin is not working after getting the data -http://www.owlcarousel.owlgraphic.com/
The jQuery plugin is not working after getting the data -http://www.owlcarousel.owlgraphic.com/
i got issues on *var owl = jQuery(this.elementRef.nativeElement).find('#breif'); owl.owlCarousel();
My full code are given bellow
angular 2 component:
/ beautify ignore:start / import {Component, OnInit , ElementRef, Inject } from '@angular/core'; import {FORM_DIRECTIVES} from '@angular/common'; import {CAROUSEL_DIRECTIVES} from 'ng2-bootstrap/components/carousel'; / beautify ignore:end / import {Api} from '../../../../services/api';
declare var jQuery:any;
@Component({ selector: 'breif', directives: [CAROUSEL_DIRECTIVES], template: require('./template.html') }) export class BreifComponent implements OnInit {
elementRef: ElementRef; breifs: Object;
public myInterval:number = 5000;
public noWrapSlides:boolean = false;
public slides:Array
constructor(@Inject(ElementRef) elementRef: ElementRef , private api: Api) {
this.elementRef = elementRef
this.loadBreif();
}
ngOnInit() {
**var owl = jQuery(this.elementRef.nativeElement).find('#breif');
owl.owlCarousel();**
}
loadBreif(){
this.api.getBreif().subscribe(
data => {
this.breifs = data.result.articles;
},
err => console.error(err),
() => {
}
)
}
} template.html
<-div class="owl-carousel" id="breif"- > <-div class="item" *ngFor="let breif of breifs">
{{breif.title}}
Have you considered a lighter-weight solution? A pure CSS makes for a great cross-framework alternative.
http://cssslider.com/wordpress-slideshow-32.html