CODEWITHSUNDEEP
javascriptjqueryangulartypescriptowl-carousel
Mahmoud Hamdy Elzohairy
Mahmoud Hamdy Elzohairy

Reputation: 41

How can i use jquery owlCarousel in Angular 4 Project

i have my 'carousel.js' file as

$('#owl-carousel-1').owlCarousel({...});

and carousel.component.html as: 

<div id="owl-carousel-1" class="owl-carousel owl-theme center-owl-nav home- 
carousel">....</div>

i have called 'carousel.js' file in carousel.component.ts as:

ngAfterViewInit(){
  require("../../../assets/js/carousel.js");
}

it's work once and once again not work !!!

can anyone help me ... thanks ...

Upvotes: 3

Views: 4304

Answers (4)

Diego Bastos
Diego Bastos

Reputation: 31

The best solution and the one that works for me is:

  1. Create a method that will call your Owl Carousel Jquery

    carousel() { /* carousel code */ }

  2. Use setTimeout and call the function setTimeout(carousel, 5000), this calls the function after 5 seconds, you may play with the values to see which one works best for you

  3. Place setTimeout depending on your situation:

    • if you have local pictures (i.e. A defined array ) place it on ngOnInit,
    • if you're consuming a service to recover image data then place the timer in the response, so that your array is filled first and then the jquery is executed

Cheers!

Ps: this solution is oriented so you may use ngfor on your carousel

Upvotes: 1

Ajay Gangarde
Ajay Gangarde

Reputation: 377

If you are calling the service for Data from database in ngOnIntIt() then instead of this, you can call all metadata in router resolve way - "resolve service" so before component initiate data will be ready with you.

Upvotes: 1

Mahmoud Hamdy Elzohairy
Mahmoud Hamdy Elzohairy

Reputation: 41

This is my code...

index.component.html

<div #carousel id="owl-carousel-1" class="owl-carousel owl-theme center-owl-nav home- 
carousel">

<article *ngFor="let sliderPost of allMainSliderPosts; let i = index;" class="article thumb-article">

    <div class="article-img">
        <img [src]="defaultImgPath + sliderPost.img" alt="{{commService.limitString(sliderPost.title, 105)}}">
    </div>

    <div class="article-body">
        <ul class="article-info">
            <li class="article-category">
                <a href="javascript:;">{{sliderPost.category_name}}</a>
            </li>
            <li class="article-type">
                <i *ngIf="sliderPost.post_type === 'videos' || sliderPost.post_type === 'photos-library'" class="fa fa-camera"></i>
                <i *ngIf="sliderPost.post_type === 'posts'" class="fa fa-file-text"></i>
            </li>
        </ul>
        <h2 class="article-title">
            <a routerLink="/p/{{sliderPost.slug}}">
                {{commService.limitString(sliderPost.title, 80)}}
            </a>
        </h2>

    </div>
</article>

index.component.ts 

import { Component, OnInit, AfterViewInit, AfterContentInit, ViewChild, ElementRef } from '@angular/core';

declare var $: any;
....
export class IndexComponent implements OnInit, AfterViewInit {
@ViewChild('carousel') el: ElementRef;
....
ngAfterViewInit(): void {
    $(this.el.nativeElement).owlCarousel(
    {
    loop: true,
    margin: 0,
    dots: false,
    nav: true,
    rtl: true,
    navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"> 
           </i>'],
    autoplay: true,
    responsive: {
      0: {
        items: 1
      },
      992: {
        items: 2
      },
    }
  }
  );
}

}

Finally, The problem still exists !!

Upvotes: 1

Nitishkumar Singh
Nitishkumar Singh

Reputation: 1839

You should follow below steps to use it in npm based angular project
Install npm module

npm install --save owl.carousel

npm install jquery

Include js flies in angular-cli.json scripts sections and declare them.

  "styles": [
    "styles.css",
    "../node_modules/owl.carousel/dist/assets/owl.carousel.min.css",
    "../node_modules/owl.carousel/dist/assets/owl.theme.default.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/owl.carousel/dist/owl.carousel.min.js"
  ],

HTML CODE

<div class="owl-carousel" #carousel>
  <div> Your Content 1 </div>
  <div> Your Content 2 </div>
  <div> Your Content 3 </div>
  <div> Your Content 4 </div>
  <div> Your Content 5 </div>
  <div> Your Content 6 </div>
  <div> Your Content 7 </div>
</div>

for Jquery 

declare var $: any;

Then use .owlCarousel({...} to apply owlCarousel.

Component.ts

import { Component, AfterContentInit, ViewChild, ElementRef } from '@angular/core';
declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterContentInit{

  @ViewChild('carousel') el:ElementRef;
  ngAfterContentInit(): void {
    console.log(this.el);
    $(this.el.nativeElement).owlCarousel();
  }
}

Here is the Github Link for an working example.

Upvotes: 2

Related Questions