i have my 'carousel.js' file as

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

and carouselponent.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 carouselponent.ts as:

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

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

can anyone help me ... thanks ...

i have my 'carousel.js' file as

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

and carousel.ponent.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.ponent.ts as:

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

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

can anyone help me ... thanks ...

• javascript
• jquery
• angular
• typescript
• owl-carousel

Share Improve this question Follow edited Jul 24, 2018 at 10:08 Mahmoud Hamdy Elzohairy asked Jul 24, 2018 at 9:59 Mahmoud Hamdy ElzohairyMahmoud Hamdy Elzohairy 4111 silver badge33 bronze badges 5

• Instead of importing file , just write the js code into your ponent – Pardeep Jain Commented Jul 24, 2018 at 10:04
• or else import this file in your index.html file throughout. – Hrishikesh Kale Commented Jul 24, 2018 at 10:05
• not working when i defined it in ponent like: $('#owl-carousel-1').owlCarousel({...}) – Mahmoud Hamdy Elzohairy Commented Jul 24, 2018 at 10:12
• Why do not use ngx-slider via npm? – T. Shashwat Commented Jul 25, 2018 at 12:47
• This is ( html, css, js files) template and i'm working on it by angular 4 project, i would like to know how to implement those without any change in design ... – Mahmoud Hamdy Elzohairy Commented Jul 26, 2018 at 11:08

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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.ponent.html',
  styleUrls: ['./app.ponent.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.

This is my code...

index.ponent.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="{{mService.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}}">
                {{mService.limitString(sliderPost.title, 80)}}
            </a>
        </h2>

    </div>
</article>

index.ponent.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 !!

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 ponent initiate data will be ready with you.

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