From 2576612137ccaf97d397c681c89299c7d7e9dfde Mon Sep 17 00:00:00 2001
From: Nicolas Frizzarin <nicolas.frizzarin54@gmail.com>
Date: Thu, 29 Feb 2024 18:46:15 +0100
Subject: [PATCH] refactor(module:pagination): refactor control flow component
 (#8416)

---
 components/pagination/demo/item-render.ts     | 24 +++--
 .../pagination-default.component.ts           | 78 ++++++++--------
 .../pagination/pagination-item.component.ts   | 90 +++++++++++--------
 .../pagination-options.component.ts           | 47 +++++-----
 components/pagination/pagination.component.ts | 17 ++--
 components/pagination/pagination.spec.ts      | 14 ++-
 6 files changed, 154 insertions(+), 116 deletions(-)

diff --git a/components/pagination/demo/item-render.ts b/components/pagination/demo/item-render.ts
index 974f9a80d6..a2e3c4ea21 100644
--- a/components/pagination/demo/item-render.ts
+++ b/components/pagination/demo/item-render.ts
@@ -5,13 +5,23 @@ import { Component } from '@angular/core';
   template: `
     <nz-pagination [nzPageIndex]="1" [nzTotal]="500" [nzItemRender]="renderItemTemplate"></nz-pagination>
     <ng-template #renderItemTemplate let-type let-page="page">
-      <ng-container [ngSwitch]="type">
-        <a *ngSwitchCase="'page'">{{ page }}</a>
-        <a *ngSwitchCase="'prev'">Previous</a>
-        <a *ngSwitchCase="'next'">Next</a>
-        <a *ngSwitchCase="'prev_5'"><<</a>
-        <a *ngSwitchCase="'next_5'">>></a>
-      </ng-container>
+      @switch (type) {
+        @case ('page') {
+          <a>{{ page }}</a>
+        }
+        @case ('prev') {
+          <a>Previous</a>
+        }
+        @case ('next') {
+          <a>Next</a>
+        }
+        @case ('prev_5') {
+          <a><<</a>
+        }
+        @case ('next_5') {
+          <a>>></a>
+        }
+      }
     </ng-template>
   `
 })
diff --git a/components/pagination/pagination-default.component.ts b/components/pagination/pagination-default.component.ts
index b6e73b30cd..8884393576 100644
--- a/components/pagination/pagination-default.component.ts
+++ b/components/pagination/pagination-default.component.ts
@@ -4,7 +4,7 @@
  */
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
-import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -41,44 +41,50 @@ import { PaginationItemRenderContext } from './pagination.types';
   template: `
     <ng-template #containerTemplate>
       <ul>
-        <li class="ant-pagination-total-text" *ngIf="showTotal">
-          <ng-template
-            [ngTemplateOutlet]="showTotal"
-            [ngTemplateOutletContext]="{ $implicit: total, range: ranges }"
-          ></ng-template>
-        </li>
-        <li
-          *ngFor="let page of listOfPageItem; trackBy: trackByPageItem"
-          nz-pagination-item
-          [locale]="locale"
-          [type]="page.type"
-          [index]="page.index"
-          [disabled]="!!page.disabled"
-          [itemRender]="itemRender"
-          [active]="pageIndex === page.index"
-          (gotoIndex)="jumpPage($event)"
-          (diffIndex)="jumpDiff($event)"
-          [direction]="dir"
-        ></li>
-        <li
-          nz-pagination-options
-          *ngIf="showQuickJumper || showSizeChanger"
-          [total]="total"
-          [locale]="locale"
-          [disabled]="disabled"
-          [nzSize]="nzSize"
-          [showSizeChanger]="showSizeChanger"
-          [showQuickJumper]="showQuickJumper"
-          [pageIndex]="pageIndex"
-          [pageSize]="pageSize"
-          [pageSizeOptions]="pageSizeOptions"
-          (pageIndexChange)="onPageIndexChange($event)"
-          (pageSizeChange)="onPageSizeChange($event)"
-        ></li>
+        @if (showTotal) {
+          <li class="ant-pagination-total-text">
+            <ng-template
+              [ngTemplateOutlet]="showTotal"
+              [ngTemplateOutletContext]="{ $implicit: total, range: ranges }"
+            />
+          </li>
+        }
+
+        @for (page of listOfPageItem; track trackByPageItem) {
+          <li
+            nz-pagination-item
+            [locale]="locale"
+            [type]="page.type"
+            [index]="page.index"
+            [disabled]="!!page.disabled"
+            [itemRender]="itemRender"
+            [active]="pageIndex === page.index"
+            (gotoIndex)="jumpPage($event)"
+            (diffIndex)="jumpDiff($event)"
+            [direction]="dir"
+          ></li>
+        }
+
+        @if (showQuickJumper || showSizeChanger) {
+          <li
+            nz-pagination-options
+            [total]="total"
+            [locale]="locale"
+            [disabled]="disabled"
+            [nzSize]="nzSize"
+            [showSizeChanger]="showSizeChanger"
+            [showQuickJumper]="showQuickJumper"
+            [pageIndex]="pageIndex"
+            [pageSize]="pageSize"
+            [pageSizeOptions]="pageSizeOptions"
+            (pageIndexChange)="onPageIndexChange($event)"
+            (pageSizeChange)="onPageSizeChange($event)"
+          ></li>
+        }
       </ul>
     </ng-template>
   `,
-  imports: [NgTemplateOutlet, NgForOf, NgIf, NzPaginationItemComponent, NzPaginationOptionsComponent],
+  imports: [NgTemplateOutlet, NzPaginationItemComponent, NzPaginationOptionsComponent],
   standalone: true
 })
 export class NzPaginationDefaultComponent implements OnChanges, OnDestroy, OnInit {
diff --git a/components/pagination/pagination-item.component.ts b/components/pagination/pagination-item.component.ts
index f6031dff3a..41e8575e24 100644
--- a/components/pagination/pagination-item.component.ts
+++ b/components/pagination/pagination-item.component.ts
@@ -18,7 +18,7 @@ import {
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { NzPaginationI18nInterface } from 'ng-zorro-antd/i18n';
 import { PaginationItemRenderContext, PaginationItemType } from './pagination.types';
-import { NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 
 @Component({
@@ -28,48 +28,62 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <ng-template #renderItemTemplate let-type let-page="page">
-      <ng-container [ngSwitch]="type">
-        <a *ngSwitchCase="'page'">{{ page }}</a>
-        <button type="button" [disabled]="disabled" class="ant-pagination-item-link" *ngSwitchCase="'prev'">
-          <ng-container [ngSwitch]="direction">
-            <span *ngSwitchCase="'rtl'" nz-icon nzType="right"></span>
-            <span *ngSwitchDefault nz-icon nzType="left"></span>
-          </ng-container>
-        </button>
-        <button type="button" [disabled]="disabled" class="ant-pagination-item-link" *ngSwitchCase="'next'">
-          <ng-container [ngSwitch]="direction">
-            <span *ngSwitchCase="'rtl'" nz-icon nzType="left"></span>
-            <span *ngSwitchDefault nz-icon nzType="right"></span>
-          </ng-container>
-        </button>
-        <ng-container *ngSwitchDefault>
-          <a class="ant-pagination-item-link" [ngSwitch]="type">
-            <div class="ant-pagination-item-container" *ngSwitchDefault>
-              <ng-container [ngSwitch]="type">
-                <ng-container *ngSwitchCase="'prev_5'" [ngSwitch]="direction">
-                  <span
-                    *ngSwitchCase="'rtl'"
-                    nz-icon
-                    nzType="double-right"
-                    class="ant-pagination-item-link-icon"
-                  ></span>
-                  <span *ngSwitchDefault nz-icon nzType="double-left" class="ant-pagination-item-link-icon"></span>
-                </ng-container>
-                <ng-container *ngSwitchCase="'next_5'" [ngSwitch]="direction">
-                  <span *ngSwitchCase="'rtl'" nz-icon nzType="double-left" class="ant-pagination-item-link-icon"></span>
-                  <span *ngSwitchDefault nz-icon nzType="double-right" class="ant-pagination-item-link-icon"></span>
-                </ng-container>
-              </ng-container>
+      @switch (type) {
+        @case ('page') {
+          <a>{{ page }}</a>
+        }
+        @case ('prev') {
+          <button type="button" [disabled]="disabled" class="ant-pagination-item-link">
+            @if (direction === 'rtl') {
+              <span nz-icon nzType="right"></span>
+            } @else {
+              <span nz-icon nzType="left"></span>
+            }
+          </button>
+        }
+        @case ('next') {
+          <button type="button" [disabled]="disabled" class="ant-pagination-item-link">
+            @if (direction === 'rtl') {
+              <span nz-icon nzType="left"></span>
+            } @else {
+              <span nz-icon nzType="right"></span>
+            }
+          </button>
+        }
+        @default {
+          <a class="ant-pagination-item-link">
+            <div class="ant-pagination-item-container">
+              @switch (type) {
+                @case ('prev_5') {
+                  @if (direction === 'rtl') {
+                    <span
+                      nz-icon
+                      nzType="double-right"
+                      class="ant-pagination-item-link-icon"
+                    ></span>
+                  } @else {
+                    <span nz-icon nzType="double-left" class="ant-pagination-item-link-icon"></span>
+                  }
+                }
+                @case ('next_5') {
+                  @if (direction === 'rtl') {
+                    <span nz-icon nzType="double-left"
+                          class="ant-pagination-item-link-icon"></span>
+                  } @else {
+                    <span nz-icon nzType="double-right" class="ant-pagination-item-link-icon"></span>
+                  }
+                }
+              }
               <span class="ant-pagination-item-ellipsis">•••</span>
             </div>
           </a>
-        </ng-container>
-      </ng-container>
+        }
+      }
     </ng-template>
     <ng-template
       [ngTemplateOutlet]="itemRender || renderItemTemplate"
       [ngTemplateOutletContext]="{ $implicit: type, page: index }"
-    ></ng-template>
+    />
   `,
   host: {
     '[class.ant-pagination-prev]': `type === 'prev'`,
@@ -84,7 +98,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
     '[attr.title]': 'title',
     '(click)': 'clickItem()'
   },
-  imports: [NgSwitch, NgSwitchCase, NzIconModule, NgSwitchDefault, NgTemplateOutlet],
+  imports: [NzIconModule, NgTemplateOutlet],
   standalone: true
 })
 export class NzPaginationItemComponent implements OnChanges {
@@ -122,7 +136,7 @@ export class NzPaginationItemComponent implements OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    const { locale, index, type } = changes;
+    const {locale, index, type} = changes;
     if (locale || index || type) {
       this.title = (
         {
diff --git a/components/pagination/pagination-options.component.ts b/components/pagination/pagination-options.component.ts
index 7a3ffa12d8..9d8b500c6a 100644
--- a/components/pagination/pagination-options.component.ts
+++ b/components/pagination/pagination-options.component.ts
@@ -3,7 +3,6 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { NgForOf, NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -26,28 +25,30 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <nz-select
-      class="ant-pagination-options-size-changer"
-      *ngIf="showSizeChanger"
-      [nzDisabled]="disabled"
-      [nzSize]="nzSize"
-      [ngModel]="pageSize"
-      (ngModelChange)="onPageSizeChange($event)"
-    >
-      <nz-option
-        *ngFor="let option of listOfPageSizeOption; trackBy: trackByOption"
-        [nzLabel]="option.label"
-        [nzValue]="option.value"
-      ></nz-option>
-    </nz-select>
-    <div class="ant-pagination-options-quick-jumper" *ngIf="showQuickJumper">
-      {{ locale.jump_to }}
-      <input [disabled]="disabled" (keydown.enter)="jumpToPageViaInput($event)" />
-      {{ locale.page }}
-    </div>
+    @if (showSizeChanger) {
+      <nz-select
+        class="ant-pagination-options-size-changer"
+        [nzDisabled]="disabled"
+        [nzSize]="nzSize"
+        [ngModel]="pageSize"
+        (ngModelChange)="onPageSizeChange($event)"
+      >
+        @for (option of listOfPageSizeOption; track option.value) {
+          <nz-option [nzLabel]="option.label" [nzValue]="option.value" />
+        }
+      </nz-select>
+    }
+
+    @if (showQuickJumper) {
+      <div class="ant-pagination-options-quick-jumper">
+        {{ locale.jump_to }}
+        <input [disabled]="disabled" (keydown.enter)="jumpToPageViaInput($event)" />
+        {{ locale.page }}
+      </div>
+    }
   `,
   host: { class: 'ant-pagination-options' },
-  imports: [NzSelectModule, NgIf, FormsModule, NgForOf],
+  imports: [NzSelectModule, FormsModule],
   standalone: true
 })
 export class NzPaginationOptionsComponent implements OnChanges {
@@ -79,10 +80,6 @@ export class NzPaginationOptionsComponent implements OnChanges {
     target.value = '';
   }
 
-  trackByOption(_: number, option: { value: number; label: string }): number {
-    return option.value;
-  }
-
   ngOnChanges(changes: SimpleChanges): void {
     const { pageSize, pageSizeOptions, locale } = changes;
     if (pageSize || pageSizeOptions || locale) {
diff --git a/components/pagination/pagination.component.ts b/components/pagination/pagination.component.ts
index 6ad2653a7d..435d205191 100644
--- a/components/pagination/pagination.component.ts
+++ b/components/pagination/pagination.component.ts
@@ -4,7 +4,7 @@
  */
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -42,11 +42,14 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'pagination';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <ng-container *ngIf="showPagination">
-      <ng-container *ngIf="nzSimple; else defaultPagination.template">
-        <ng-template [ngTemplateOutlet]="simplePagination.template"></ng-template>
-      </ng-container>
-    </ng-container>
+    @if (showPagination) {
+      @if (nzSimple) {
+        <ng-template [ngTemplateOutlet]="simplePagination.template" />
+      } @else {
+        <ng-template [ngTemplateOutlet]="defaultPagination.template" />
+      }
+    }
+
     <nz-pagination-simple
       #simplePagination
       [disabled]="nzDisabled"
@@ -81,7 +84,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'pagination';
     '[class.mini]': `!nzSimple && size === 'small'`,
     '[class.ant-pagination-rtl]': `dir === 'rtl'`
   },
-  imports: [NgIf, NgTemplateOutlet, NzPaginationSimpleComponent, NzPaginationDefaultComponent],
+  imports: [NgTemplateOutlet, NzPaginationSimpleComponent, NzPaginationDefaultComponent],
   standalone: true
 })
 export class NzPaginationComponent implements OnInit, OnDestroy, OnChanges {
diff --git a/components/pagination/pagination.spec.ts b/components/pagination/pagination.spec.ts
index eb06cfa4fd..7f38438568 100644
--- a/components/pagination/pagination.spec.ts
+++ b/components/pagination/pagination.spec.ts
@@ -457,9 +457,17 @@ export class NzTestPaginationComponent {
   template: `
     <nz-pagination [nzPageIndex]="1" [nzTotal]="50" [nzItemRender]="renderItemTemplate"></nz-pagination>
     <ng-template #renderItemTemplate let-type let-page="page">
-      <a *ngIf="type === 'prev'">Previous</a>
-      <a *ngIf="type === 'next'">Next</a>
-      <a *ngIf="type === 'page'">{{ page * 2 }}</a>
+      @switch (type) {
+        @case ('prev') {
+          <a>Previous</a>
+        }
+        @case ('next') {
+          <a>Next</a>
+        }
+        @case ('page') {
+          <a>{{ page * 2 }}</a>
+        }
+      }
     </ng-template>
   `
 })