fix(angular): BrowserAnimationsModule slides deletion

nolimits4web · Feb 4, 2021 · fef6ebd · fef6ebd
1 parent 955543e
commit fef6ebd
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 3 deletions.
diff --git a/playground/angular/src/app/app.component.html b/playground/angular/src/app/app.component.html
@@ -73,4 +73,19 @@
 
   <button (click)="show = !show">Toggle show</button>
   {{ exampleConfig | json }}
+  <swiper
+    #swiper
+    [slidesPerView]="1"
+    [centeredSlides]="true"
+    [navigation]="{ prevEl: '.swiper-navigation-prev', nextEl: '.swiper-navigation-next' }"
+    [pagination]="{ type: 'fraction' }"
+  >
+    <ng-template swiperSlide *ngFor="let slide of slides2; index as i">
+      {{ i }} - {{ slide }}
+    </ng-template>
+  </swiper>
+  <button type="button" class="swiper-navigation-prev">&lt;</button>
+  <button type="button" class="swiper-navigation-next">&gt;</button>
+  <hr />
+  <button (click)="replaceSlides()">replace slides</button>
 </main>
diff --git a/playground/angular/src/app/app.component.ts b/playground/angular/src/app/app.component.ts
@@ -28,6 +28,11 @@ export class AppComponent {
   slidesPerView: number = 4;
   pagination: any = false;
 
+  slides2 = ['slide 1', 'slide 2', 'slide 3'];
+  replaceSlides() {
+    this.slides2 = ['foo', 'bar'];
+  }
+
   togglePagination() {
     if (!this.pagination) {
       this.pagination = { clickable: true };

diff --git a/playground/angular/src/app/app.module.ts b/playground/angular/src/app/app.module.ts
@@ -3,10 +3,15 @@ import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
 import { SwiperModule } from 'src/angular/src/public-api';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule.withServerTransition({ appId: 'serverApp' }), SwiperModule],
+  imports: [
+    BrowserModule.withServerTransition({ appId: 'serverApp' }),
+    SwiperModule,
+    BrowserAnimationsModule,
+  ],
   providers: [],
   bootstrap: [AppComponent],
 })

diff --git a/src/angular/src/swiper.component.ts b/src/angular/src/swiper.component.ts
@@ -465,8 +465,14 @@ export class SwiperComponent implements OnInit {
       this.prependSlides = of(this.slides.slice(this.slides.length - this.loopedSlides));
       this.appendSlides = of(this.slides.slice(0, this.loopedSlides));
     }
-    this._changeDetectorRef.detectChanges();
-    this.swiperRef?.update();
+    this._changeDetectorRef.markForCheck();
+    if (this.swiperRef) {
+      this.zone.runOutsideAngular(() => {
+        setTimeout(() => {
+          this.swiperRef.update();
+        });
+      });
+    }
   };
 
   get isSwiperActive() {