title: How to use multiple ngx-slick-carousel on same page in Angular?
body: <p>I'm using slick carousel on my page , but it gives me an error and do not show 2nd carousel.
  <strong>slider.component.ts</strong></p>
  <pre><code>&lt;div *ngIf=&quot;mainSlider&quot;&gt;
      &lt;div class=&quot;main__slider&quot;&gt;
          &lt;ngx-slick-carousel class=&quot;carousel&quot; #slickModal=&quot;slick-carousel&quot; [config]=&quot;slideConfig&quot;&gt;
              &lt;div ngxSlickItem *ngFor=&quot;let slide of slides&quot; class=&quot;slide&quot;&gt;
                  &lt;div class=&quot;main__slide&quot;&gt;
                      &lt;div class=&quot;main__slide-inner&quot;&gt;
                          &lt;img class=&quot;main__slide-image&quot; src=&quot;/assets/img/{{slide.img}}.svg&quot; alt=&quot;&quot;&gt;
                          &lt;div class=&quot;main__slide-title&quot;&gt;
                              Lorem ipsum dolor sit amet.
                          &lt;/div&gt;
                          &lt;div class=&quot;main__slide-subtitle&quot;&gt;
                              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, odit?
                          &lt;/div&gt;
                          &lt;div class=&quot;main__slide-button&quot;&gt;
                              &lt;div class=&quot;main__slide-hint&quot;&gt;
                                  &lt;img src=&quot;assets/img/sandglass.svg&quot; alt=&quot;&quot;&gt;Lorem ipsum dolor sit amet, consectetur
                                  adipisicing elit. Deleniti esse atque eveniet incidunt.
                              &lt;/div&gt;
                              &lt;img src=&quot;assets/img/icons/dotted-arrow.svg&quot; alt=&quot;&quot;&gt;
                              &lt;a class=&quot;button-blue&quot; href=&quot;#&quot;&gt;
                                  Lorem ipsum dolor sit.
                              &lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/ngx-slick-carousel&gt;
      &lt;/div&gt;
      &lt;div class=&quot;main__slider-arrows&quot;&gt;
          &lt;button class=&quot;slick-arrow&quot; (click)=&quot;prev()&quot;&gt;&lt;img src=&quot;assets/img/icons/arrow-slider.svg&quot; alt=&quot;&quot;&gt;&lt;/button&gt;
          &lt;button class=&quot;slick-arrow&quot; style=&quot;transform: rotateY(180deg);&quot; (click)=&quot;next()&quot;&gt;&lt;img
                  src=&quot;assets/img/icons/arrow-slider.svg&quot; alt=&quot;&quot;&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;main__slider-info&quot;&gt;
          &lt;div class=&quot;slider-index&quot;&gt;
              &lt;span class=&quot;current-slide&quot;&gt;01&lt;/span&gt;/&lt;span class=&quot;num-slide&quot;&gt;03&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class=&quot;slider-progress&quot;&gt;
              &lt;div class=&quot;slider-progress__back&quot;&gt;&lt;/div&gt;
              &lt;span [style.width.%]=&quot;progressBarWidth&quot;&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div *ngIf=&quot;eventsSlider&quot;&gt;
      &lt;div class=&quot;news-slider-mobile&quot;&gt;
          &lt;ngx-slick-carousel class=&quot;carousel&quot; #eventsModal=&quot;slick-carousel&quot; [config]=&quot;slideConfig&quot;&gt;
              &lt;div class=&quot;events-slider&quot;&gt;
                  &lt;div class=&quot;events-slider__arrows news-arrows active-arrows&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;events-slider__arrows activity-arrows&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;events__tabs&quot;&gt;
                      &lt;div class=&quot;title tab news-tab active&quot;&gt;
                          News
                      &lt;/div&gt;
                      &lt;div class=&quot;switch first-on&quot;&gt;
                          &lt;span&gt;&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;title tab activity-tab&quot;&gt;
                          Events
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;events__tab-content&quot;&gt;
                      &lt;div class=&quot;news-item tab-item active-tab&quot;&gt;
                          &lt;div class=&quot;news-slider-mobile&quot;&gt;
                              &lt;a *ngFor=&quot;let banner of eventsBanners&quot; href=&quot;#&quot; class=&quot;events__item&quot;&gt;
                                  &lt;div class=&quot;events__item-image&quot;&gt;
                                      &lt;img src=&quot;assets/img/{{ banner.img }}.png&quot; alt=&quot;&quot;&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;events__item-wrapper&quot;&gt;
                                      &lt;div class=&quot;date-view&quot;&gt;
                                          &lt;div class=&quot;date-view__date&quot;&gt;
                                              &lt;img src=&quot;images/icons/calendar.svg&quot; alt=&quot;&quot;&gt;${{banner.date}}
                                          &lt;/div&gt;
                                          &lt;div class=&quot;date-view__view&quot;&gt;
                                              &lt;img src=&quot;images/icons/eye.svg&quot; alt=&quot;&quot;&gt;${{banner.views}}
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;events__item-title&quot;&gt;
                                      ${{banner.title}}
                                  &lt;/div&gt;
                                  &lt;div class=&quot;events__item-text&quot;&gt;
                                      ${{banner.description}}
                                  &lt;/div&gt;
                              &lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/ngx-slick-carousel&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>As you can see I have <code>mainSlider</code> and <code>eventsSlider</code> , also I tried to give personal <code>#slickModal</code> names (@ViewChild also watching own modal) to each slick carousel.<br />
  <strong>slider.components.ts</strong></p>
  <pre><code>import { Component, OnInit, ViewChild, Input } from '@angular/core';
  import { SlickCarouselComponent } from 'ngx-slick-carousel';
  
  import { eventsBanners } from './banners';
  
  @Component({
    selector: 'app-slider',
    templateUrl: './slider.component.html',
    styleUrls: ['./slider.component.scss']
  })
  export class SliderComponent implements OnInit {
  
    @Input() mainSlider: boolean;
    @Input() eventsSlider: boolean;
  
    @ViewChild('slickModal') slickModal: SlickCarouselComponent;
    @ViewChild('eventsModal') eventsModal: SlickCarouselComponent;
  ...
  </code></pre>
  <p>I import app-slider on main page<br />
  <strong>main-page.component.html</strong></p>
  <pre><code>&lt;section class=&quot;main&quot;&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;main__inner&quot;&gt;
              &lt;app-slider mainSlider=&quot;true&quot;&gt;&lt;/app-slider&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  &lt;section class=&quot;events&quot;&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;app-slider eventsSlider=&quot;true&quot;&gt;&lt;/app-slider&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  <p>On first banner I'm changing the width of progress bar and then make next() function
  <strong>slider.component.ts</strong></p>
  <pre><code>  next() {
      console.log(this.slickModal) // gives first modal
      console.log(this.eventsModal) // gives undefined
      this.slickModal.slickNext();
    }
  </code></pre>
  <p>Here is an error</p>
  <blockquote>
  <p>TypeError: Cannot read property 'slickNext' of undefined</p>
  </blockquote>
  <p>Can someone help to fix this ? How should I use 2 <code>&lt;ngx-slick-carousel&gt;</code> on same page/file ?</p>