From 29bd01fc9cf31066debce6d196318b83b4f991a8 Mon Sep 17 00:00:00 2001
From: Vlad Tansky <vl.tansky@gmail.com>
Date: Thu, 17 Mar 2022 13:32:38 +0200
Subject: [PATCH] feat(angular): support `[ngClass]` in swiperSlide

---
 playground/angular/src/app/home/home.component.html | 3 ++-
 playground/angular/src/app/home/home.component.ts   | 1 +
 src/angular/src/swiper-slide.directive.ts           | 4 ++++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/playground/angular/src/app/home/home.component.html b/playground/angular/src/app/home/home.component.html
index 15fdeb9f4..f5a7b228a 100644
--- 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
index da3df0e65..ce170ca94 100644
--- 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
index 82df7ab6d..1c673ad06 100644
--- 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) {