angular2-useful-swiper icon indicating copy to clipboard operation
angular2-useful-swiper copied to clipboard

swiper doesn't work on ngIf variable change

Open massimiliamanto74 opened this issue 4 years ago • 2 comments

Hi, I'm using angular2-useful-swiper on Angular 9 but I have a problem. If I use angular2-useful-swiperwith ngIf it doesn't work correctly. <div *ngIf="myVariable"><swiper....></swiper></div> on init my variable is equal to TRUE. onAfterViewInit I subscribe a BehaviourSubject that is changed from false to true and myVariable is updated to true. Then the Div show the swiper but the slides doesn't move on click dots or arrows BUT autoplay works. Can someone help me?

massimiliamanto74 avatar Oct 05 '20 09:10 massimiliamanto74

Can you try passing [intialized] variable to swiper component?

<swiper [initialized]="myVariable">
  <ng-container *ngIf="myVariable">
     <!-- ngFor items -->
  </ng-container>
</swiper> 

In the implementation of this repo, it control swiper through shouldInitialized variable which is updated from [initialized] Input. Also, they update swiper when swiper's childElementCount is different with slideCount (it means ngFor loop create/delete some DOM element)

  ngAfterViewChecked() {
    if (this.shouldInitialize) {
      this.setup();
    }

    if (
      this.swiperWrapper &&
      this.slideCount !== this.swiperWrapper.childElementCount
    ) {
      this.slideCount = this.swiperWrapper.childElementCount;
      this.swiper.update();
    }
  }

leo6104 avatar Oct 05 '20 14:10 leo6104

I am facing the same issue. Any update on this?

dinesh-tech1990 avatar Nov 16 '22 09:11 dinesh-tech1990