Skip to content

Commit 0f1690c

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:pagination): support standalone component (#8234)
1 parent ad02381 commit 0f1690c

8 files changed

Lines changed: 72 additions & 54 deletions

‎components/pagination/doc/index.en-US.md‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -23,22 +23,22 @@ import { NzPaginationModule } from 'ng-zorro-antd/pagination';
2323
<nz-pagination [nzPageIndex]="1" [nzTotal]="50"></nz-pagination>
2424
```
2525

26-
### nz-pagination
27-
28-
| Property | Description | Type | Default | Global Config |
29-
| -------- | ----------- | ---- | ------- | ------------- |
30-
| `[nzTotal]` | total number of data items | `number` | `0` | - |
31-
| `[nzPageIndex]` | current page number，double binding | `number` | `1` | - |
32-
| `[nzPageSize]` | number of data items per page, double binding | `number` | `10`| - |
33-
| `[nzDisabled]` | disable pagination | `boolean` | `false`| - |
34-
| `[nzShowQuickJumper]` | determine whether you can jump to pages directly | `boolean` | `false` | ✅ |
35-
| `[nzShowSizeChanger]` | determine whether `nzPageSize` can be changed | `boolean` | `false` | ✅ |
36-
| `[nzSimple]` | whether to use simple mode | `boolean` | - | ✅ |
37-
| `[nzSize]` | specify the size of `nz-pagination`, can be set to `small` | `'small'` | `'default'` | ✅ |
38-
| `[nzResponsive]` | `Pagination` would resize according to the width of the window | `boolean` | `false` | - |
39-
| `[nzPageSizeOptions]` | specify the sizeChanger options | `number[]` | `[10, 20, 30, 40]` | ✅ |
40-
| `[nzItemRender]` | to customize item | `TemplateRef<{ $implicit: 'page' \| 'prev' \| 'next'\| 'prev_5'\| 'next_5', page: number }>` | - | - |
41-
| `[nzShowTotal]` | to display the total number and range | `TemplateRef<{ $implicit: number, range: [ number, number ] }>` | - | - |
42-
| `[nzHideOnSinglePage]` | Whether to hide pager on single page | `boolean` | `false` | - |
43-
| `(nzPageIndexChange)` | current page number change callback | `EventEmitter<number>` | - | - |
44-
| `(nzPageSizeChange)` | number of data items per page change callback | `EventEmitter<number>` | - | - |
26+
### nz-pagination:standalone
27+
28+
| Property | Description | Type | Default | Global Config |
29+
| ---------------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------------------ | ------------- |
30+
| `[nzTotal]` | total number of data items | `number` | `0` | - |
31+
| `[nzPageIndex]` | current page number，double binding | `number` | `1` | - |
32+
| `[nzPageSize]` | number of data items per page, double binding | `number` | `10` | - |
33+
| `[nzDisabled]` | disable pagination | `boolean` | `false` | - |
34+
| `[nzShowQuickJumper]` | determine whether you can jump to pages directly | `boolean` | `false` | ✅ |
35+
| `[nzShowSizeChanger]` | determine whether `nzPageSize` can be changed | `boolean` | `false` | ✅ |
36+
| `[nzSimple]` | whether to use simple mode | `boolean` | - | ✅ |
37+
| `[nzSize]` | specify the size of `nz-pagination`, can be set to `small` | `'small'` | `'default'` | ✅ |
38+
| `[nzResponsive]` | `Pagination` would resize according to the width of the window | `boolean` | `false` | - |
39+
| `[nzPageSizeOptions]` | specify the sizeChanger options | `number[]` | `[10, 20, 30, 40]` | ✅ |
40+
| `[nzItemRender]` | to customize item | `TemplateRef<{ $implicit: 'page' \| 'prev' \| 'next'\| 'prev_5'\| 'next_5', page: number }>` | - | - |
41+
| `[nzShowTotal]` | to display the total number and range | `TemplateRef<{ $implicit: number, range: [ number, number ] }>` | - | - |
42+
| `[nzHideOnSinglePage]` | Whether to hide pager on single page | `boolean` | `false` | - |
43+
| `(nzPageIndexChange)` | current page number change callback | `EventEmitter<number>` | - | - |
44+
| `(nzPageSizeChange)` | number of data items per page change callback | `EventEmitter<number>` | - | - |

‎components/pagination/doc/index.zh-CN.md‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -24,22 +24,22 @@ import { NzPaginationModule } from 'ng-zorro-antd/pagination';
2424
<nz-pagination [nzPageIndex]="1" [nzTotal]="50"></nz-pagination>
2525
```
2626

27-
### nz-pagination
28-
29-
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
30-
| --- | --- | --- | --- | --- |
31-
| `[nzTotal]` | 数据总数 | `number` | - | - |
32-
| `[nzPageIndex]` | 当前页数，可双向绑定 | `number` | `1` | - |
33-
| `[nzPageSize]` | 每页条数 ，可双向绑定| `number` | `10`| - |
34-
| `[nzDisabled]` | 是否禁用 | `boolean` | `false`| - |
35-
| `[nzShowQuickJumper]` | 是否可以快速跳转至某页 | `boolean` | `false` | ✅ |
36-
| `[nzShowSizeChanger]` | 是否可以改变 `nzPageSize` | `boolean` | `false` | ✅ |
37-
| `[nzSimple]` | 当添加该属性时，显示为简单分页 | `boolean` | - | ✅ |
38-
| `[nzSize]` | 当为「small」时，是小尺寸分页 | `'small'` | `'default'` | ✅ |
39-
| `[nzResponsive]` | 当 `nzSize` 未指定时，根据屏幕宽度自动调整尺寸 | `boolean` | `false` | - |
40-
| `[nzPageSizeOptions]` | 指定每页可以显示多少条 | `number[]` | `[10, 20, 30, 40]` | ✅ |
41-
| `[nzItemRender]` | 用于自定义页码的结构 | `TemplateRef<{ $implicit: 'page' \| 'prev' \| 'next'\| 'prev_5'\| 'next_5', page: number }>` | - | - |
42-
| `[nzShowTotal]` | 用于显示数据总量和当前数据范围，具体使用方式见代码演示部分 | `TemplateRef<{ $implicit: number, range: [ number, number ] }>` | - | - |
43-
| `[nzHideOnSinglePage]` | 只有一页时是否隐藏分页器 | `boolean` | `false` | - |
44-
| `(nzPageIndexChange)` | 页码改变的回调 | `EventEmitter<number>` | - | - |
45-
| `(nzPageSizeChange)` | 每页条数改变的回调 | `EventEmitter<number>` | - | - |
27+
### nz-pagination:standalone
28+
29+
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
30+
| ---------------------- | ---------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------------------ | -------- |
31+
| `[nzTotal]` | 数据总数 | `number` | - | - |
32+
| `[nzPageIndex]` | 当前页数，可双向绑定 | `number` | `1` | - |
33+
| `[nzPageSize]` | 每页条数 ，可双向绑定 | `number` | `10` | - |
34+
| `[nzDisabled]` | 是否禁用 | `boolean` | `false` | - |
35+
| `[nzShowQuickJumper]` | 是否可以快速跳转至某页 | `boolean` | `false` | ✅ |
36+
| `[nzShowSizeChanger]` | 是否可以改变 `nzPageSize` | `boolean` | `false` | ✅ |
37+
| `[nzSimple]` | 当添加该属性时，显示为简单分页 | `boolean` | - | ✅ |
38+
| `[nzSize]` | 当为「small」时，是小尺寸分页 | `'small'` | `'default'` | ✅ |
39+
| `[nzResponsive]` | 当 `nzSize` 未指定时，根据屏幕宽度自动调整尺寸 | `boolean` | `false` | - |
40+
| `[nzPageSizeOptions]` | 指定每页可以显示多少条 | `number[]` | `[10, 20, 30, 40]` | ✅ |
41+
| `[nzItemRender]` | 用于自定义页码的结构 | `TemplateRef<{ $implicit: 'page' \| 'prev' \| 'next'\| 'prev_5'\| 'next_5', page: number }>` | - | - |
42+
| `[nzShowTotal]` | 用于显示数据总量和当前数据范围，具体使用方式见代码演示部分 | `TemplateRef<{ $implicit: number, range: [ number, number ] }>` | - | - |
43+
| `[nzHideOnSinglePage]` | 只有一页时是否隐藏分页器 | `boolean` | `false` | - |
44+
| `(nzPageIndexChange)` | 页码改变的回调 | `EventEmitter<number>` | - | - |
45+
| `(nzPageSizeChange)` | 每页条数改变的回调 | `EventEmitter<number>` | - | - |

‎components/pagination/pagination-default.component.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
*/
55

66
import { Direction, Directionality } from '@angular/cdk/bidi';
7+
import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
78
import {
89
ChangeDetectionStrategy,
910
ChangeDetectorRef,
@@ -29,6 +30,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
2930
import { NzPaginationI18nInterface } from 'ng-zorro-antd/i18n';
3031

3132
import { NzPaginationItemComponent } from './pagination-item.component';
33+
import { NzPaginationOptionsComponent } from './pagination-options.component';
3234
import { PaginationItemRenderContext } from './pagination.types';
3335

3436
@Component({
@@ -75,7 +77,9 @@ import { PaginationItemRenderContext } from './pagination.types';
7577
></li>
7678
</ul>
7779
</ng-template>
78-
`
80+
`,
81+
imports: [NgTemplateOutlet, NgForOf, NgIf, NzPaginationItemComponent, NzPaginationOptionsComponent],
82+
standalone: true
7983
})
8084
export class NzPaginationDefaultComponent implements OnChanges, OnDestroy, OnInit {
8185
@ViewChild('containerTemplate', { static: true }) template!: TemplateRef<NzSafeAny>;

‎components/pagination/pagination-item.component.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import {
1818
import { NzSafeAny } from 'ng-zorro-antd/core/types';
1919
import { NzPaginationI18nInterface } from 'ng-zorro-antd/i18n';
2020
import { PaginationItemRenderContext, PaginationItemType } from './pagination.types';
21+
import { NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
22+
import { NzIconModule } from 'ng-zorro-antd/icon';
2123

2224
@Component({
2325
selector: 'li[nz-pagination-item]',
@@ -45,7 +47,12 @@ import { PaginationItemRenderContext, PaginationItemType } from './pagination.ty
4547
<div class="ant-pagination-item-container" *ngSwitchDefault>
4648
<ng-container [ngSwitch]="type">
4749
<ng-container *ngSwitchCase="'prev_5'" [ngSwitch]="direction">
48-
<span *ngSwitchCase="'rtl'" nz-icon nzType="double-right" class="ant-pagination-item-link-icon"></span>
50+
<span
51+
*ngSwitchCase="'rtl'"
52+
nz-icon
53+
nzType="double-right"
54+
class="ant-pagination-item-link-icon"
55+
></span>
4956
<span *ngSwitchDefault nz-icon nzType="double-left" class="ant-pagination-item-link-icon"></span>
5057
</ng-container>
5158
<ng-container *ngSwitchCase="'next_5'" [ngSwitch]="direction">
@@ -76,7 +83,9 @@ import { PaginationItemRenderContext, PaginationItemType } from './pagination.ty
7683
'[class.ant-pagination-item-active]': 'active',
7784
'[attr.title]': 'title',
7885
'(click)': 'clickItem()'
79-
}
86+
},
87+
imports: [NgSwitch, NgSwitchCase, NzIconModule, NgSwitchDefault, NgTemplateOutlet],
88+
standalone: true
8089
})
8190
export class NzPaginationItemComponent implements OnChanges {
8291
static ngAcceptInputType_type: PaginationItemType | string | null | undefined;

‎components/pagination/pagination-options.component.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6+
import { NgForOf, NgIf } from '@angular/common';
67
import {
78
ChangeDetectionStrategy,
89
Component,
@@ -13,9 +14,11 @@ import {
1314
SimpleChanges,
1415
ViewEncapsulation
1516
} from '@angular/core';
17+
import { FormsModule } from '@angular/forms';
1618

1719
import { toNumber } from 'ng-zorro-antd/core/util';
1820
import { NzPaginationI18nInterface } from 'ng-zorro-antd/i18n';
21+
import { NzSelectModule } from 'ng-zorro-antd/select';
1922

2023
@Component({
2124
selector: 'li[nz-pagination-options]',
@@ -43,7 +46,9 @@ import { NzPaginationI18nInterface } from 'ng-zorro-antd/i18n';
4346
{{ locale.page }}
4447
</div>
4548
`,
46-
host: { class: 'ant-pagination-options' }
49+
host: { class: 'ant-pagination-options' },
50+
imports: [NzSelectModule, NgIf, FormsModule, NgForOf],
51+
standalone: true
4752
})
4853
export class NzPaginationOptionsComponent implements OnChanges {
4954
@Input() nzSize: 'default' | 'small' = 'default';

‎components/pagination/pagination-simple.component.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
2929
import { toNumber } from 'ng-zorro-antd/core/util';
3030
import { NzPaginationI18nInterface } from 'ng-zorro-antd/i18n';
3131

32+
import { NzPaginationItemComponent } from './pagination-item.component';
3233
import { PaginationItemRenderContext } from './pagination.types';
3334

3435
@Component({
@@ -64,7 +65,9 @@ import { PaginationItemRenderContext } from './pagination.types';
6465
></li>
6566
</ul>
6667
</ng-template>
67-
`
68+
`,
69+
imports: [NzPaginationItemComponent],
70+
standalone: true
6871
})
6972
export class NzPaginationSimpleComponent implements OnChanges, OnDestroy, OnInit {
7073
@ViewChild('containerTemplate', { static: true }) template!: TemplateRef<NzSafeAny>;

‎components/pagination/pagination.component.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
*/
55

66
import { Direction, Directionality } from '@angular/cdk/bidi';
7+
import { NgIf, NgTemplateOutlet } from '@angular/common';
78
import {
89
ChangeDetectionStrategy,
910
ChangeDetectorRef,
@@ -28,6 +29,8 @@ import { BooleanInput, NumberInput } from 'ng-zorro-antd/core/types';
2829
import { InputBoolean, InputNumber } from 'ng-zorro-antd/core/util';
2930
import { NzI18nService, NzPaginationI18nInterface } from 'ng-zorro-antd/i18n';
3031

32+
import { NzPaginationDefaultComponent } from './pagination-default.component';
33+
import { NzPaginationSimpleComponent } from './pagination-simple.component';
3134
import { PaginationItemRenderContext } from './pagination.types';
3235

3336
const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'pagination';
@@ -77,7 +80,9 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'pagination';
7780
'[class.ant-pagination-disabled]': 'nzDisabled',
7881
'[class.mini]': `!nzSimple && size === 'small'`,
7982
'[class.ant-pagination-rtl]': `dir === 'rtl'`
80-
}
83+
},
84+
imports: [NgIf, NgTemplateOutlet, NzPaginationSimpleComponent, NzPaginationDefaultComponent],
85+
standalone: true
8186
})
8287
export class NzPaginationComponent implements OnInit, OnDestroy, OnChanges {
8388
readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;

‎components/pagination/pagination.module.ts‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,7 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { BidiModule } from '@angular/cdk/bidi';
7-
import { CommonModule } from '@angular/common';
86
import { NgModule } from '@angular/core';
9-
import { FormsModule } from '@angular/forms';
10-
11-
import { NzI18nModule } from 'ng-zorro-antd/i18n';
12-
import { NzIconModule } from 'ng-zorro-antd/icon';
13-
import { NzSelectModule } from 'ng-zorro-antd/select';
147

158
import { NzPaginationDefaultComponent } from './pagination-default.component';
169
import { NzPaginationItemComponent } from './pagination-item.component';
@@ -19,14 +12,13 @@ import { NzPaginationSimpleComponent } from './pagination-simple.component';
1912
import { NzPaginationComponent } from './pagination.component';
2013

2114
@NgModule({
22-
declarations: [
15+
imports: [
2316
NzPaginationComponent,
2417
NzPaginationSimpleComponent,
2518
NzPaginationOptionsComponent,
2619
NzPaginationItemComponent,
2720
NzPaginationDefaultComponent
2821
],
29-
exports: [NzPaginationComponent],
30-
imports: [BidiModule, CommonModule, FormsModule, NzSelectModule, NzI18nModule, NzIconModule]
22+
exports: [NzPaginationComponent]
3123
})
3224
export class NzPaginationModule {}

0 commit comments

Comments
 (0)