fix(angular): toggle input (#5229)

* fix(angular): toggle input * fix(angular): toggle input * fix(angular): params * fix(angular): remove console log Co-authored-by: Vladimir Kharlampidi <nolimits4web@gmail.com>
nolimits4web · Dec 2, 2021 · ab3a4ad · ab3a4ad
1 parent 41a9f01
commit ab3a4ad
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 23 deletions.
diff --git a/playground/angular/src/app/home/home.component.html b/playground/angular/src/app/home/home.component.html
@@ -1,4 +1,22 @@
 <main>
+  <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>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
+    ><ng-template swiperSlide>Slide 9</ng-template>
+  </swiper>
+  <h6>Initial value false</h6>
+  <button (click)="p2 = !p2">{{ p2 ? 'hide' : 'show' }}</button>
+  <swiper [pagination]="p2" class="mySwiper">
+    <ng-template swiperSlide>Slide 1</ng-template><ng-template swiperSlide>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
+    ><ng-template swiperSlide>Slide 9</ng-template>
+  </swiper>
   <div>
     <h4>Enable / disable</h4>
     <swiper [enabled]="enabled" [pagination]="true">

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

diff --git a/src/angular/src/swiper.component.ts b/src/angular/src/swiper.component.ts
@@ -459,10 +459,7 @@ export class SwiperComponent implements OnInit {
   ) {}
 
   private _setElement(el: ElementRef, ref: any, update: string, key = 'el') {
-    if (!el || !ref) {
-      return;
-    }
-    if (ref && el.nativeElement) {
+    if (ref && el && el.nativeElement) {
       if (ref[key] === el.nativeElement) {
         return;
       }
@@ -806,14 +803,6 @@ export class SwiperComponent implements OnInit {
     const _key = key.replace(/^_/, '');
     const isCurrentParamObj = isObject(this.swiperRef.params[_key]);
 
-    if (Object.keys(this.swiperRef.modules).indexOf(_key) >= 0) {
-      const defaultParams = this.swiperRef.modules[_key].params[_key];
-      if (isCurrentParamObj) {
-        extend(this.swiperRef.params[_key], defaultParams);
-      } else {
-        this.swiperRef.params[_key] = defaultParams;
-      }
-    }
     if (_key === 'enabled') {
       if (value === true) {
         this.swiperRef.enable();

diff --git a/src/angular/src/utils/get-params.ts b/src/angular/src/utils/get-params.ts
@@ -9,28 +9,38 @@ export function getParams(obj: any = {}) {
   const params: any = {
     on: {},
   };
-  const passedParams: any = {};
+  const events = {};
+  const passedParams = {};
   extend(params, Swiper.defaults);
   extend(params, Swiper.extendedDefaults);
   params._emitClasses = true;
+  params.init = false;
 
-  const rest: any = {};
-  Object.keys(obj).forEach((key: string) => {
+  const rest = {};
+  const allowedParams = paramsList.map((key) => key.replace(/_/, ''));
+  Object.keys(obj).forEach((key) => {
     const _key = key.replace(/^_/, '');
-    if (typeof obj[_key] === 'undefined') return;
     if (allowedParams.indexOf(_key) >= 0) {
-      if (isObject(obj[_key])) {
+      if (isObject(obj[key])) {
         params[_key] = {};
         passedParams[_key] = {};
-        extend(params[_key], obj[_key]);
-        extend(passedParams[_key], obj[_key]);
+        extend(params[_key], obj[key]);
+        extend(passedParams[_key], obj[key]);
       } else {
-        params[_key] = obj[_key];
-        passedParams[_key] = obj[_key];
+        params[_key] = obj[key];
+        passedParams[_key] = obj[key];
       }
-    } else {
-      rest[_key] = obj[_key];
     }
+    // else if (key.search(/on[A-Z]/) === 0 && typeof obj[key] === 'function') {
+    //   events[`${_key[2].toLowerCase()}${key.substr(3)}`] = obj[key];
+    // }
+    else {
+      rest[_key] = obj[key];
+    }
+  });
+  ['navigation', 'pagination', 'scrollbar'].forEach((key) => {
+    if (params[key] === true) params[key] = {};
+    if (params[key] === false) delete params[key];
   });
 
   return { params, passedParams, rest };