Owl Carousel is not working in Angular 4

Question

I am working on angular 4 and I want to implement owl carousel in my application. I imported owl carousel in the application refer by this link https://www.npmjs.com/package/ng2-owl-carousel.

But images is not coming. I am sharing in my code:

home.component.ts

import { Component } from '@angular/core';
import {Http} from '@angular/http';
import {OwlCarousel} from 'ng2-owl-carousel';
import { ViewChild } from '@angular/core'
declare var $:any;
@Component({
    moduleId:module.id,
    templateUrl:'home.component.html'
})

export class HomeComponent{
    public pageTitle:string ='Home';
    @ViewChild('owlElement') owlElement: OwlCarousel       

      fun() {
        this.owlElement.next([200])
        //duration 200ms
      }
      object = {          
        link: "http://lorempixel.com/100/100"
      }

}

home.component.html

<owl-carousel
[options]="{items: 3, dots: false, navigation: false}"

[items]="images"

[carouselClasses]="['owl-theme', 'row', 'sliding']">
<div class="item" *ngFor="let image of images;let i = index">
    <div class="thumbnail-image" [ng-style]="{'background-image':'url(/assets/img/images.jpg)'}"></div>
</div>
</owl-carousel>

app.module.ts

imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    OwlModule
]

Only next or prev is coming but Image is not coming. I am new in angular 4. So I am not able to solve this problem. I have seen links But Still I am not able to solve.

angularjs ng-style: background-image isn't working
Angular 2 - background image into a html file using ngStyle

Can you please provide a fiddler or plunker so that , can have better look into the issue — Aji, Aug 14 '18 at 21:09

score 0 · Answer 1 · answered Nov 11 '17 at 22:51

0

i don't see any images inside your loop, add img inside your ngFor:

       <img src="{{image}}" style="" />

and use

      [ngStyle] and not [ng-style]

answered Nov 11 '17 at 22:51

Fateh Mohamed

20,445
5
43
52

score 0 · Answer 2 · answered Dec 02 '17 at 04:23

have you included css and js as given in here

"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/owl.carousel/dist/owl.carousel.js"

]

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

2]don't use background images use like below `

`

may be image url path may wrong [ng-style]="{'background-image':'url(/assets/img/images.jpg)'}"

Owl Carousel is not working in Angular 4

2 Answers2