feat(angular): support [ngClass] in swiperSlide (#5562)

nolimits4web · Mar 17, 2022 · 5d4ffdc · 5d4ffdc
1 parent 5465b6c
commit 5d4ffdc
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/playground/angular/src/app/home/home.component.html b/playground/angular/src/app/home/home.component.html
@@ -2,7 +2,8 @@
   <h6>Initial value true</h6>
   <button (click)="p1 = !p1">{{ p1 ? 'hide' : 'show' }}</button>
   <swiper [pagination]="p1" class="mySwiper">
-    <ng-template swiperSlide>Slide 1</ng-template><ng-template swiperSlide>Slide 2</ng-template
+    <ng-template swiperSlide class="testClass1">Slide 1</ng-template
+    ><ng-template swiperSlide [ngClass]="example">Slide 2</ng-template
     ><ng-template swiperSlide>Slide 3</ng-template><ng-template swiperSlide>Slide 4</ng-template
     ><ng-template swiperSlide>Slide 5</ng-template><ng-template swiperSlide>Slide 6</ng-template
     ><ng-template swiperSlide>Slide 7</ng-template><ng-template swiperSlide>Slide 8</ng-template

diff --git a/playground/angular/src/app/home/home.component.ts b/playground/angular/src/app/home/home.component.ts
@@ -33,6 +33,7 @@ SwiperCore.use([
 export class HomePage {
   p1 = true;
   p2 = false;
+  example = 'testClass2';
   @ViewChild('swiperRef', { static: false }) swiperRef?: SwiperComponent;
 
   show: boolean;

diff --git a/src/angular/src/swiper-slide.directive.ts b/src/angular/src/swiper-slide.directive.ts
@@ -6,6 +6,10 @@ import { coerceBooleanProperty } from './utils/utils';
 export class SwiperSlideDirective {
   @Input() virtualIndex: number;
   @Input() class: string = '';
+  @Input()
+  set ngClass(val: string) {
+    this.class = [this.class || '', val].join(' ');
+  }
   @Input('data-swiper-autoplay') autoplayDelay: string | null = null;
   @Input()
   set zoom(val: boolean) {