Skip to content

Commit 3f6a9ed

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:switch): support standalone component (#8214)
1 parent 428c53c commit 3f6a9ed

4 files changed

Lines changed: 42 additions & 43 deletions

File tree

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

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -18,23 +18,23 @@ import { NzSwitchModule } from 'ng-zorro-antd/switch';
1818

1919
## API
2020

21-
### nz-switch
22-
23-
| Property | Description | Type | Default | Global Config |
24-
| -------- | ----------- | ---- | ------- | ------------- |
25-
| `[nzId]` | button id attribute inside the component| `string` | - |
26-
| `[ngModel]` | determine whether the `nz-switch` is checked, double binding | `boolean` | `false` |
27-
| `[nzCheckedChildren]` | content to be shown when the state is checked | `string \| TemplateRef<void>` | - |
28-
| `[nzUnCheckedChildren]` | content to be shown when the state is unchecked | `string \| TemplateRef<void>` | - |
29-
| `[nzDisabled]` | Disable switch | `boolean` | `false` |
30-
| `[nzSize]` | the size of the `nz-switch`, options: `default` `small` | `'small' \| 'default'` | `'default'` | ✅ |
31-
| `[nzLoading]` | loading state of switch | `boolean` | `false` |
32-
| `[nzControl]` | determine whether fully control state by user | `boolean` | `false` |
33-
| `(ngModelChange)` | a callback function, can be executed when the checked state is changing | `EventEmitter<boolean>` | - |
21+
### nz-switch:standalone
22+
23+
| Property | Description | Type | Default | Global Config |
24+
| ----------------------- | ----------------------------------------------------------------------- | ----------------------------- | ----------- | ------------- |
25+
| `[nzId]` | button id attribute inside the component | `string` | - |
26+
| `[ngModel]` | determine whether the `nz-switch` is checked, double binding | `boolean` | `false` |
27+
| `[nzCheckedChildren]` | content to be shown when the state is checked | `string \| TemplateRef<void>` | - |
28+
| `[nzUnCheckedChildren]` | content to be shown when the state is unchecked | `string \| TemplateRef<void>` | - |
29+
| `[nzDisabled]` | Disable switch | `boolean` | `false` |
30+
| `[nzSize]` | the size of the `nz-switch`, options: `default` `small` | `'small' \| 'default'` | `'default'` | ✅ |
31+
| `[nzLoading]` | loading state of switch | `boolean` | `false` |
32+
| `[nzControl]` | determine whether fully control state by user | `boolean` | `false` |
33+
| `(ngModelChange)` | a callback function, can be executed when the checked state is changing | `EventEmitter<boolean>` | - |
3434

3535
#### Methods
3636

37-
| Name | Description |
38-
| ---- | ----------- |
39-
| focus() | get focus |
40-
| blur() | remove focus |
37+
| Name | Description |
38+
| ------- | ------------ |
39+
| focus() | get focus |
40+
| blur() | remove focus |

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -19,23 +19,23 @@ import { NzSwitchModule } from 'ng-zorro-antd/switch';
1919

2020
## API
2121

22-
### nz-switch
23-
24-
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
25-
| --- | --- | --- | --- | --- |
26-
| `[nzId]` | 组件内部 button 的 id 值 | `string` | - |
27-
| `[ngModel]` | 指定当前是否选中，可双向绑定 | `boolean` | `false` |
28-
| `[nzCheckedChildren]` | 选中时的内容 | `string \| TemplateRef<void>` | - |
29-
| `[nzUnCheckedChildren]` | 非选中时的内容 | `string \| TemplateRef<void>` | - |
30-
| `[nzDisabled]` | disable 状态 | `boolean` | `false` |
31-
| `[nzSize]` | 开关大小，可选值：`default` `small` | `'small' \| 'default'` | `'default'` | ✅ |
32-
| `[nzLoading]` | 加载中的开关 | `boolean` | `false` |
33-
| `[nzControl]` | 是否完全由用户控制状态 | `boolean` | `false` |
34-
| `(ngModelChange)` | 当前是否选中的回调 | `EventEmitter<boolean>` | `false` |
22+
### nz-switch:standalone
23+
24+
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
25+
| ----------------------- | ----------------------------------- | ----------------------------- | ----------- | -------- |
26+
| `[nzId]` | 组件内部 button 的 id 值 | `string` | - |
27+
| `[ngModel]` | 指定当前是否选中，可双向绑定 | `boolean` | `false` |
28+
| `[nzCheckedChildren]` | 选中时的内容 | `string \| TemplateRef<void>` | - |
29+
| `[nzUnCheckedChildren]` | 非选中时的内容 | `string \| TemplateRef<void>` | - |
30+
| `[nzDisabled]` | disable 状态 | `boolean` | `false` |
31+
| `[nzSize]` | 开关大小，可选值：`default` `small` | `'small' \| 'default'` | `'default'` | ✅ |
32+
| `[nzLoading]` | 加载中的开关 | `boolean` | `false` |
33+
| `[nzControl]` | 是否完全由用户控制状态 | `boolean` | `false` |
34+
| `(ngModelChange)` | 当前是否选中的回调 | `EventEmitter<boolean>` | `false` |
3535

3636
#### 方法
3737

38-
| 名称 | 描述 |
39-
| ---- | ----------- |
38+
| 名称 | 描述 |
39+
| ------- | -------- |
4040
| focus() | 获取焦点 |
41-
| blur() | 移除焦点 |
41+
| blur() | 移除焦点 |

‎components/switch/switch.component.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
import { FocusMonitor } from '@angular/cdk/a11y';
77
import { Direction, Directionality } from '@angular/cdk/bidi';
88
import { ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE } from '@angular/cdk/keycodes';
9+
import { NgIf } from '@angular/common';
910
import {
1011
AfterViewInit,
1112
ChangeDetectionStrategy,
@@ -27,8 +28,11 @@ import { fromEvent, Subject } from 'rxjs';
2728
import { takeUntil } from 'rxjs/operators';
2829

2930
import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
31+
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
3032
import { BooleanInput, NzSizeDSType, OnChangeType, OnTouchedType } from 'ng-zorro-antd/core/types';
3133
import { InputBoolean } from 'ng-zorro-antd/core/util';
34+
import { NzWaveModule } from 'ng-zorro-antd/core/wave';
35+
import { NzIconModule } from 'ng-zorro-antd/icon';
3236

3337
const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'switch';
3438

@@ -73,7 +77,9 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'switch';
7377
</span>
7478
<div class="ant-click-animating-node"></div>
7579
</button>
76-
`
80+
`,
81+
imports: [NzWaveModule, NzIconModule, NgIf, NzOutletModule],
82+
standalone: true
7783
})
7884
export class NzSwitchComponent implements ControlValueAccessor, AfterViewInit, OnDestroy, OnInit {
7985
readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;

‎components/switch/switch.module.ts‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,12 @@
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';
97

10-
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
11-
import { NzWaveModule } from 'ng-zorro-antd/core/wave';
12-
import { NzIconModule } from 'ng-zorro-antd/icon';
13-
148
import { NzSwitchComponent } from './switch.component';
159

1610
@NgModule({
17-
exports: [NzSwitchComponent],
18-
declarations: [NzSwitchComponent],
19-
imports: [BidiModule, CommonModule, NzWaveModule, NzIconModule, NzOutletModule]
11+
imports: [NzSwitchComponent],
12+
exports: [NzSwitchComponent]
2013
})
2114
export class NzSwitchModule {}

0 commit comments

Comments
 (0)