angular - *ngFor and *ngIf are not working with ngx-slick-carousel in angular. How to fix it?

Question

I am making carousel using ngx-slick-carousel in angular. It works fine with static data but when I try to use *ngFor in the div instead of static data then it displays all the div in verticle line instead of horizontal. How to solve this issue ?

app.component.html

  <div class="slider slider-nav">

    <div *ngFor="let i of numberArray">
      <h3>{{i}}</h3>
    </div>
  </div>
  <div class="action">
    <a href="#" data-slide="3">go to slide 3</a>
    <a href="#" data-slide="4">go to slide 4</a>
    <a href="#" data-slide="5">go to slide 5</a>
  </div>
</div>

// ---------------------------------
/* this shows perfect result
<div class="main">
  <div class="slider slider-nav">

    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
    <div><h3>7</h3></div>
  </div>
  <div class="action">
    <a href="#" data-slide="3">go to slide 3</a>
    <a href="#" data-slide="4">go to slide 4</a>
    <a href="#" data-slide="5">go to slide 5</a>
  </div>
</div>*/
// -----------------------------

In app.component.scss file

.main {
    font-family:Arial;
    width:500px;
    display:block;
    margin:0 auto;
  }
  h3 {
      background: yellow;
      color: #3498db;
      font-size: 36px;
      line-height: 100px;
      margin: 10px;
      padding: 2%;
      position: relative;
      text-align: center;
  }
  .action{
    display:block;
    margin:100px auto;
    width:100%;
    text-align:center;
  }
  .action a {
    display:inline-block;
    padding:5px 10px; 
    background:#f30;
    color:#fff;
    text-decoration:none;
  }
  .action a:hover{
    background:#000;
  }

In app.component.ts file

import { Component, OnInit } from '@angular/core';

declare var $: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'slickApp';
  numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  setCarousel() {
    $('.slider-nav').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
      dots: true,
      focusOnSelect: true
    });

    $('a[data-slide]').click((e) => {
      e.preventDefault();
      const slideno = $(this).data('slide');
      $('.slider-nav').slick('slickGoTo', slideno - 1);
    });
  }
  ngOnInit() {
    setTimeout(() => {
      this.setCarousel();
    }, 5000);
  }
}

In app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SlickCarouselModule } from 'ngx-slick-carousel';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SlickCarouselModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In angular.json file I have added following things also

"styles": [
     "src/styles.scss",
     "node_modules/slick-carousel/slick/slick.scss",
     "node_modules/slick-carousel/slick/slick-theme.scss"
    ],
    "scripts": [
     "node_modules/jquery/dist/jquery.min.js",
     "node_modules/slick-carousel/slick/slick.min.js"
    ],

How can i solve this issue ?

标签： angularslick.js