generator-ng2-webpack icon indicating copy to clipboard operation
generator-ng2-webpack copied to clipboard

The jJQuery plugin is not working after getting the data -http://www.owlcarousel.owlgraphic.com/

Open itranga opened this issue 9 years ago • 1 comments

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}}

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/36735854-the-jjquery-plugin-is-not-working-after-getting-the-data-http-www-owlcarousel-owlgraphic-com?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

itranga avatar Aug 08 '16 07:08 itranga

Have you considered a lighter-weight solution? A pure CSS makes for a great cross-framework alternative.

http://cssslider.com/wordpress-slideshow-32.html

cmelion avatar Aug 09 '16 12:08 cmelion