fix(angular): nested swiper (#4785)

* fix(angular): nested swiper * fix(angular): nested swiper better example
nolimits4web · Jul 21, 2021 · 2be958c · 2be958c
1 parent adac257
commit 2be958c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/playground/angular/src/app/home/home.component.html b/playground/angular/src/app/home/home.component.html
@@ -1,4 +1,19 @@
 <main>
+  <div>
+    <h4>Nested</h4>
+    <swiper direction="horizontal">
+      <ng-container *ngFor="let item of [].constructor(4); let i = index">
+        <ng-template swiperSlide> test {{ i + 1 }} </ng-template>
+      </ng-container>
+      <ng-template swiperSlide> test 5 </ng-template>
+      <ng-template swiperSlide>
+        <swiper direction="vertical">
+          <ng-template swiperSlide> test vertical 1 </ng-template>
+          <ng-template swiperSlide> test vertical 2 </ng-template>
+        </swiper>
+      </ng-template>
+    </swiper>
+  </div>
   <div>
     <h4>Default: Not in NgZone</h4>
     <swiper [virtual]="true">

diff --git a/src/angular/src/swiper.component.ts b/src/angular/src/swiper.component.ts
@@ -416,7 +416,7 @@ export class SwiperComponent implements OnInit {
     this._setElement(el, this.pagination, 'pagination');
   }
   _paginationElRef: ElementRef;
-  @ContentChildren(SwiperSlideDirective, { descendants: true, emitDistinctChangesOnly: true })
+  @ContentChildren(SwiperSlideDirective, { descendants: false, emitDistinctChangesOnly: true })
   slidesEl: QueryList<SwiperSlideDirective>;
   private slides: SwiperSlideDirective[];