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: ` - - {{ page }} - Previous - Next - << - >> - + @switch (type) { + @case ('page') { + {{ page }} + } + @case ('prev') { + Previous + } + @case ('next') { + Next + } + @case ('prev_5') { + << + } + @case ('next_5') { + >> + } + } ` }) 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: ` `, - 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: ` - - {{ page }} - - - - -
- - - - - - - - - - + @switch (type) { + @case ('page') { + {{ page }} + } + @case ('prev') { + + } + @case ('next') { + + } + @default { + +
+ @switch (type) { + @case ('prev_5') { + @if (direction === 'rtl') { + + } @else { + + } + } + @case ('next_5') { + @if (direction === 'rtl') { + + } @else { + + } + } + } •••
- - + } + } + /> `, 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: ` - - - -
- {{ locale.jump_to }} - - {{ locale.page }} -
+ @if (showSizeChanger) { + + @for (option of listOfPageSizeOption; track option.value) { + + } + + } + + @if (showQuickJumper) { +
+ {{ locale.jump_to }} + + {{ locale.page }} +
+ } `, 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: ` - - - - - + @if (showPagination) { + @if (nzSimple) { + + } @else { + + } + } + - Previous - Next - {{ page * 2 }} + @switch (type) { + @case ('prev') { + Previous + } + @case ('next') { + Next + } + @case ('page') { + {{ page * 2 }} + } + } ` })