feat(module:timeline): support standalone component (#8210)

NG-ZORRO · Dec 1, 2023 · b7c6859 · b7c6859
1 parent 319381a
commit b7c6859
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 39 deletions.
diff --git a/components/timeline/doc/index.en-US.md b/components/timeline/doc/index.en-US.md
@@ -27,24 +27,24 @@ import { NzTimelineModule } from 'ng-zorro-antd/timeline';
 </nz-timeline>
 ```
 
-### nz-timeline
+### nz-timeline:standalone
 
 Timeline
 
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| `[nzPending]` | Set the last ghost node's existence or its content | `string\|boolean\|TemplateRef<void>` | `false` |
-| `[nzPendingDot]` | Set the dot of the last ghost node when pending is true | `string\|TemplateRef<void>` | `<span nz-icon nzType="loading"></span>` |
-| `[nzReverse]` | Reverse nodes or not | `boolean` | `false` |
-| `[nzMode]` | By sending `alternate` the timeline will distribute the nodes to the left and right | `'left' \| 'alternate' \| 'right' \| 'custom'` | - |
+| Property         | Description                                                                         | Type                                           | Default                                  |
+| ---------------- | ----------------------------------------------------------------------------------- | ---------------------------------------------- | ---------------------------------------- |
+| `[nzPending]`    | Set the last ghost node's existence or its content                                  | `string\|boolean\|TemplateRef<void>`           | `false`                                  |
+| `[nzPendingDot]` | Set the dot of the last ghost node when pending is true                             | `string\|TemplateRef<void>`                    | `<span nz-icon nzType="loading"></span>` |
+| `[nzReverse]`    | Reverse nodes or not                                                                | `boolean`                                      | `false`                                  |
+| `[nzMode]`       | By sending `alternate` the timeline will distribute the nodes to the left and right | `'left' \| 'alternate' \| 'right' \| 'custom'` | -                                        |
 
-### nz-timeline-item
+### nz-timeline-item:standalone
 
 Node of timeline
 
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| `[nzColor]` | Set the circle's color to `'blue' \| 'red' \| 'green' \| 'gray'`| `string` | `blue` |
-| `[nzDot]` | Customize timeline dot | `string \| TemplateRef<void>` | - |
-| `[nzPosition]` | Customize position, only works when `nzMode` is `custom` | `'left' \| 'right'` | - |
-| `[nzLabel]` | Set the label |  `string \| TemplateRef<void>` | - |
+| Property       | Description                                                      | Type                          | Default |
+| -------------- | ---------------------------------------------------------------- | ----------------------------- | ------- |
+| `[nzColor]`    | Set the circle's color to `'blue' \| 'red' \| 'green' \| 'gray'` | `string`                      | `blue`  |
+| `[nzDot]`      | Customize timeline dot                                           | `string \| TemplateRef<void>` | -       |
+| `[nzPosition]` | Customize position, only works when `nzMode` is `custom`         | `'left' \| 'right'`           | -       |
+| `[nzLabel]`    | Set the label                                                    | `string \| TemplateRef<void>` | -       |
diff --git a/components/timeline/doc/index.zh-CN.md b/components/timeline/doc/index.zh-CN.md
@@ -28,24 +28,24 @@ import { NzTimelineModule } from 'ng-zorro-antd/timeline';
 </nz-timeline>
 ```
 
-### nz-timeline
+### nz-timeline:standalone
 
 时间轴。
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `[nzPending]` | 指定最后一个幽灵节点是否存在或内容 | `string \| boolean \| TemplateRef<void>` | `false` |
-| `[nzPendingDot]` | 当最后一个幽灵节点存在時，指定其时间图点 | `string \| TemplateRef<void>` | `<span nz-icon nzType="loading"></span>` |
-| `[nzReverse]` | 节点排序 | `boolean` | `false` |
-| `[nzMode]` | 可以改变时间轴和内容的相对位置 | `'left' \| 'alternate' \| 'right' \| 'custom'` | - |
+| 参数             | 说明                                     | 类型                                           | 默认值                                   |
+| ---------------- | ---------------------------------------- | ---------------------------------------------- | ---------------------------------------- |
+| `[nzPending]`    | 指定最后一个幽灵节点是否存在或内容       | `string \| boolean \| TemplateRef<void>`       | `false`                                  |
+| `[nzPendingDot]` | 当最后一个幽灵节点存在時，指定其时间图点 | `string \| TemplateRef<void>`                  | `<span nz-icon nzType="loading"></span>` |
+| `[nzReverse]`    | 节点排序                                 | `boolean`                                      | `false`                                  |
+| `[nzMode]`       | 可以改变时间轴和内容的相对位置           | `'left' \| 'alternate' \| 'right' \| 'custom'` | -                                        |
 
-### nz-timeline-item
+### nz-timeline-item:standalone
 
 时间轴的每一个节点。
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `[nzColor]` | 指定圆圈颜色 `'blue' \| 'red' \| 'green' \| 'gray'` | `string` | blue |
-| `[nzDot]` | 自定义时间轴点 | `string \| TemplateRef<void>` | - |
-| `[nzPosition]` | 自定义节点位置，仅当 `nzMode` 为 `custom` 时有效 | `'left' \| 'right'` | - |
-| `[nzLabel]` | 设置标签 |  `string \| TemplateRef<void>` | - |
+| 参数           | 说明                                                | 类型                          | 默认值 |
+| -------------- | --------------------------------------------------- | ----------------------------- | ------ |
+| `[nzColor]`    | 指定圆圈颜色 `'blue' \| 'red' \| 'green' \| 'gray'` | `string`                      | blue   |
+| `[nzDot]`      | 自定义时间轴点                                      | `string \| TemplateRef<void>` | -      |
+| `[nzPosition]` | 自定义节点位置，仅当 `nzMode` 为 `custom` 时有效    | `'left' \| 'right'`           | -      |
+| `[nzLabel]`    | 设置标签                                            | `string \| TemplateRef<void>` | -      |
diff --git a/components/timeline/timeline-item.component.ts b/components/timeline/timeline-item.component.ts
@@ -3,6 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -15,6 +16,8 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
+
 import { TimelineService } from './timeline.service';
 import { NzTimelineItemColor, NzTimelinePosition, TimelineTimeDefaultColors } from './typings';
 
@@ -56,7 +59,9 @@ function isDefaultColor(color?: string): boolean {
         </div>
       </li>
     </ng-template>
-  `
+  `,
+  imports: [NgIf, NzOutletModule],
+  standalone: true
 })
 export class NzTimelineItemComponent implements OnChanges {
   @ViewChild('template', { static: false }) template!: TemplateRef<void>;

diff --git a/components/timeline/timeline.component.ts b/components/timeline/timeline.component.ts
@@ -4,6 +4,7 @@
  */
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
+import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -24,6 +25,9 @@ import {
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+
 import { NzTimelineItemComponent } from './timeline-item.component';
 import { TimelineService } from './timeline.service';
 import { NzTimelineMode, NzTimelinePosition } from './typings';
@@ -72,7 +76,9 @@ import { NzTimelineMode, NzTimelinePosition } from './typings';
     </ng-template>
     <!-- Grasp items -->
     <ng-content></ng-content>
-  `
+  `,
+  imports: [NgIf, NgTemplateOutlet, NgForOf, NzOutletModule, NzIconModule],
+  standalone: true
 })
 export class NzTimelineComponent implements AfterContentInit, OnChanges, OnDestroy, OnInit {
   @ContentChildren(NzTimelineItemComponent) listOfItems!: QueryList<NzTimelineItemComponent>;

diff --git a/components/timeline/timeline.module.ts b/components/timeline/timeline.module.ts
@@ -3,20 +3,13 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { BidiModule } from '@angular/cdk/bidi';
-import { PlatformModule } from '@angular/cdk/platform';
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
-import { NzIconModule } from 'ng-zorro-antd/icon';
-
 import { NzTimelineItemComponent } from './timeline-item.component';
 import { NzTimelineComponent } from './timeline.component';
 
 @NgModule({
-  declarations: [NzTimelineItemComponent, NzTimelineComponent],
-  exports: [NzTimelineItemComponent, NzTimelineComponent],
-  imports: [BidiModule, CommonModule, PlatformModule, NzIconModule, NzOutletModule]
+  imports: [NzTimelineItemComponent, NzTimelineComponent],
+  exports: [NzTimelineItemComponent, NzTimelineComponent]
 })
 export class NzTimelineModule {}