feat(angular): enabled prop (#4949)

nolimits4web · Sep 13, 2021 · 6c0a3e5 · 6c0a3e5
1 parent 3d82256
commit 6c0a3e5
Show file tree

Hide file tree

Showing 4 changed files with 25 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,14 @@
 <main>
+  <div>
+    <h4>Enable / disable</h4>
+    <swiper [enabled]="enabled" [pagination]="true">
+      <ng-template swiperSlide> test vertical 2 </ng-template>
+      <ng-template swiperSlide> test vertical 2 </ng-template>
+      <ng-template swiperSlide> test vertical 2 </ng-template>
+      <ng-template swiperSlide> test vertical 2 </ng-template>
+    </swiper>
+    <button (click)="toggleEnabled()">{{ enabled ? 'Disable' : 'Enable' }}</button>
+  </div>
   <div>
     <h4>data-swiper-autoplay</h4>
     <swiper

diff --git a/playground/angular/src/app/home/home.component.ts b/playground/angular/src/app/home/home.component.ts
@@ -42,6 +42,11 @@ export class HomePage {
     this.slides$.next(Array.from({ length: 600 }).map((el, index) => `Slide ${index + 1}`));
   }
 
+  enabled: boolean = false;
+  toggleEnabled() {
+    this.enabled = !this.enabled;
+  }
+
   thumbsSwiper: SwiperCore;
   setThumbsSwiper(swiper: SwiperCore) {
     this.thumbsSwiper = swiper;

diff --git a/src/angular/src/swiper.component.ts b/src/angular/src/swiper.component.ts
@@ -53,6 +53,7 @@ import { isPlatformBrowser } from '@angular/common';
   ],
 })
 export class SwiperComponent implements OnInit {
+  @Input() enabled: SwiperOptions['enabled'];
   @Input() direction: SwiperOptions['direction'];
   @Input() touchEventsTarget: SwiperOptions['touchEventsTarget'];
   @Input() initialSlide: SwiperOptions['initialSlide'];
@@ -807,7 +808,14 @@ export class SwiperComponent implements OnInit {
         this.swiperRef.params[_key] = defaultParams;
       }
     }
-
+    if (_key === 'enabled') {
+      if (value === true) {
+        this.swiperRef.enable();
+      } else if (value === false) {
+        this.swiperRef.disable();
+      }
+      return;
+    }
     if (isCurrentParamObj && isObject(value)) {
       extend(this.swiperRef.params[_key], value);
     } else {

diff --git a/src/angular/src/utils/params-list.ts b/src/angular/src/utils/params-list.ts
@@ -1,6 +1,7 @@
 /* underscore in name -> watch for changes */
 export const paramsList = [
   'init',
+  'enabled',
   '_direction',
   'touchEventsTarget',
   'initialSlide',