refactor(module:tree,tree-select,tree-view): migrate demo to standalo…

…ne mode (#8813) * refactor(module:tree): migrate demo to standalone mode * refactor(module:tree-view): migrate demo to standalone mode * refactor(module:tree-select): migrate demo to standalone mode
NG-ZORRO · Oct 2, 2024 · d69fd33 · d69fd33
1 parent 7869fec
commit d69fd33
Show file tree

Hide file tree

Showing 31 changed files with 285 additions and 277 deletions.
diff --git a/components/tree-select/demo/async.ts b/components/tree-select/demo/async.ts
@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 import { NzFormatEmitEvent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
+import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
 
 @Component({
   selector: 'nz-demo-tree-select-async',
+  standalone: true,
+  imports: [FormsModule, NzTreeSelectModule],
   template: `
     <nz-tree-select
       style="width: 250px"
@@ -21,7 +25,7 @@ import { NzFormatEmitEvent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
 export class NzDemoTreeSelectAsyncComponent {
   expandKeys = ['0-0'];
   value?: string;
-  nodes = [
+  readonly nodes = [
     {
       title: 'Node1',
       value: '0-0',

diff --git a/components/tree-select/demo/basic.ts b/components/tree-select/demo/basic.ts
@@ -1,7 +1,12 @@
 import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
 
 @Component({
   selector: 'nz-demo-tree-select-basic',
+  standalone: true,
+  imports: [FormsModule, NzTreeSelectModule],
   template: `
     <nz-tree-select
       style="width: 250px"
@@ -17,7 +22,7 @@ import { Component, OnInit } from '@angular/core';
 export class NzDemoTreeSelectBasicComponent implements OnInit {
   expandKeys = ['100', '1001'];
   value?: string;
-  nodes = [
+  readonly nodes = [
     {
       title: 'parent 1',
       key: '100',

diff --git a/components/tree-select/demo/checkable.ts b/components/tree-select/demo/checkable.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
 
 @Component({
   selector: 'nz-demo-tree-select-checkable',
+  standalone: true,
+  imports: [FormsModule, NzTreeSelectModule],
   template: `
     <nz-tree-select
       style="width: 250px"
@@ -16,7 +21,7 @@ import { Component } from '@angular/core';
 })
 export class NzDemoTreeSelectCheckableComponent {
   value: string[] = ['0-0-0'];
-  nodes = [
+  readonly nodes = [
     {
       title: 'Node1',
       value: '0-0',

diff --git a/components/tree-select/demo/customized-icon.ts b/components/tree-select/demo/customized-icon.ts
@@ -1,7 +1,13 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
 
 @Component({
   selector: 'nz-demo-tree-select-customized-icon',
+  standalone: true,
+  imports: [FormsModule, NzIconModule, NzTreeSelectModule],
   template: `
     <nz-tree-select
       style="width: 250px"
@@ -30,7 +36,7 @@ import { Component } from '@angular/core';
 })
 export class NzDemoTreeSelectCustomizedIconComponent {
   value?: string;
-  nodes = [
+  readonly nodes = [
     {
       title: 'parent 1',
       key: '100',

diff --git a/components/tree-select/demo/module b/components/tree-select/demo/module
diff --git a/components/tree-select/demo/multiple.ts b/components/tree-select/demo/multiple.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
 
 @Component({
   selector: 'nz-demo-tree-select-multiple',
+  standalone: true,
+  imports: [FormsModule, NzTreeSelectModule],
   template: `
     <nz-tree-select
       style="width: 250px"
@@ -20,7 +25,7 @@ import { Component } from '@angular/core';
 })
 export class NzDemoTreeSelectMultipleComponent {
   value: string[] = [];
-  nodes = [
+  readonly nodes = [
     {
       title: 'parent 1',
       key: '100',

diff --git a/components/tree-select/demo/no-data.ts b/components/tree-select/demo/no-data.ts
@@ -1,23 +1,24 @@
 import { Component } from '@angular/core';
 
+import { NzSpinModule } from 'ng-zorro-antd/spin';
+import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
+
 @Component({
   selector: 'nz-demo-tree-select-no-data',
+  standalone: true,
+  imports: [NzSpinModule, NzTreeSelectModule],
   template: `
     <nz-tree-select
       style="width: 250px"
-      [nzNodes]="nodes"
+      [nzNodes]="[]"
       nzPlaceHolder="Please select"
-      [(ngModel)]="value"
       [nzNotFoundContent]="noData"
     ></nz-tree-select>
     <ng-template #noData>
       <div style="height: 200px; display: flex; justify-content: center; align-items: center">
-        <nz-spin nzSimple> </nz-spin>
+        <nz-spin nzSimple></nz-spin>
       </div>
     </ng-template>
   `
 })
-export class NzDemoTreeSelectNoDataComponent {
-  value?: string;
-  nodes = [];
-}
+export class NzDemoTreeSelectNoDataComponent {}
diff --git a/components/tree-select/demo/placement.ts b/components/tree-select/demo/placement.ts
@@ -1,39 +1,43 @@
 import { Component } from '@angular/core';
-export type NzPlacementType = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight' | '';
+import { FormsModule } from '@angular/forms';
+
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { NzTreeSelectModule, NzPlacementType } from 'ng-zorro-antd/tree-select';
 
 @Component({
   selector: 'nz-demo-tree-select-placement',
+  standalone: true,
+  imports: [FormsModule, NzRadioModule, NzTreeSelectModule],
   template: `
-    <nz-space nzDirection="vertical" style="width:100%;">
-      <nz-radio-group *nzSpaceItem [(ngModel)]="placement">
-        @for (item of list; track item) {
-          <label nz-radio-button [nzValue]="item">{{ item }}</label>
-        }
-      </nz-radio-group>
-      <nz-tree-select
-        *nzSpaceItem
-        style="width: 120px"
-        nzPlaceHolder="Please select"
-        [nzPlacement]="placement"
-        [(ngModel)]="value"
-        [nzMaxTagCount]="3"
-        [nzMaxTagPlaceholder]="omittedPlaceHolder"
-        [nzNodes]="nodes"
-        [nzDropdownStyle]="{ width: '300px' }"
-        [nzDefaultExpandAll]="true"
-        [nzAllowClear]="false"
-        [nzMultiple]="true"
-        (ngModelChange)="onChange($event)"
-      ></nz-tree-select>
-      <ng-template #omittedPlaceHolder let-omittedValues>and {{ omittedValues.length }} more...</ng-template>
-    </nz-space>
+    <nz-radio-group [(ngModel)]="placement">
+      @for (item of list; track item) {
+        <label nz-radio-button [nzValue]="item">{{ item }}</label>
+      }
+    </nz-radio-group>
+    <br />
+    <br />
+    <nz-tree-select
+      style="width: 120px"
+      nzPlaceHolder="Please select"
+      [nzPlacement]="placement"
+      [(ngModel)]="value"
+      [nzMaxTagCount]="3"
+      [nzMaxTagPlaceholder]="omittedPlaceHolder"
+      [nzNodes]="nodes"
+      [nzDropdownStyle]="{ width: '300px' }"
+      [nzDefaultExpandAll]="true"
+      [nzAllowClear]="false"
+      [nzMultiple]="true"
+      (ngModelChange)="onChange($event)"
+    ></nz-tree-select>
+    <ng-template #omittedPlaceHolder let-omittedValues>and {{ omittedValues.length }} more...</ng-template>
   `
 })
 export class NzDemoTreeSelectPlacementComponent {
   list: NzPlacementType[] = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
   placement: NzPlacementType = 'topLeft';
   value: string[] = [];
-  nodes = [
+  readonly nodes = [
     {
       title: 'parent 1',
       key: '100',

diff --git a/components/tree-select/demo/status.ts b/components/tree-select/demo/status.ts
@@ -1,31 +1,23 @@
 import { Component } from '@angular/core';
 
+import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
+
 @Component({
   selector: 'nz-demo-tree-select-status',
+  standalone: true,
+  imports: [NzTreeSelectModule],
   template: `
-    <nz-space nzDirection="vertical" style="width:100%;">
-      <nz-tree-select
-        *nzSpaceItem
-        [nzNodes]="nodes"
-        nzStatus="error"
-        nzPlaceHolder="Error"
-        [(ngModel)]="value"
-        style="width:100%;"
-      ></nz-tree-select>
-      <nz-tree-select
-        *nzSpaceItem
-        nzMultiple
-        [nzNodes]="nodes"
-        nzShowSearch
-        nzStatus="warning"
-        nzPlaceHolder="Warning multiple"
-        [(ngModel)]="value"
-        style="width:100%;"
-      ></nz-tree-select>
-    </nz-space>
+    <nz-tree-select [nzNodes]="[]" nzStatus="error" nzPlaceHolder="Error" style="width:100%;"></nz-tree-select>
+    <br />
+    <br />
+    <nz-tree-select
+      nzMultiple
+      [nzNodes]="[]"
+      nzShowSearch
+      nzStatus="warning"
+      nzPlaceHolder="Warning multiple"
+      style="width:100%;"
+    ></nz-tree-select>
   `
 })
-export class NzDemoTreeSelectStatusComponent {
-  value?: string;
-  nodes = [];
-}
+export class NzDemoTreeSelectStatusComponent {}
diff --git a/components/tree-select/demo/virtual-scroll.ts b/components/tree-select/demo/virtual-scroll.ts
@@ -1,9 +1,35 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { NzTreeNodeOptions } from 'ng-zorro-antd/tree';
+import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
+
+function dig(path = '0', level = 3): NzTreeNodeOptions[] {
+  const list: NzTreeNodeOptions[] = [];
+  for (let i = 0; i < 10; i += 1) {
+    const key = `${path}-${i}`;
+    const treeNode: NzTreeNodeOptions = {
+      title: key,
+      key,
+      expanded: true,
+      children: [],
+      isLeaf: false
+    };
+
+    if (level > 0) {
+      treeNode.children = dig(key, level - 1);
+    } else {
+      treeNode.isLeaf = true;
+    }
+
+    list.push(treeNode);
+  }
+  return list;
+}
 
 @Component({
   selector: 'nz-demo-tree-select-virtual-scroll',
+  standalone: true,
+  imports: [NzTreeSelectModule],
   template: `
     <nz-tree-select
       style="width: 250px"
@@ -15,33 +41,6 @@ import { NzTreeNodeOptions } from 'ng-zorro-antd/tree';
     ></nz-tree-select>
   `
 })
-export class NzDemoTreeSelectVirtualScrollComponent implements OnInit {
-  nodes: NzTreeNodeOptions[] = [];
-
-  ngOnInit(): void {
-    const dig = (path = '0', level = 3): NzTreeNodeOptions[] => {
-      const list = [];
-      for (let i = 0; i < 10; i += 1) {
-        const key = `${path}-${i}`;
-        const treeNode: NzTreeNodeOptions = {
-          title: key,
-          key,
-          expanded: true,
-          children: [],
-          isLeaf: false
-        };
-
-        if (level > 0) {
-          treeNode.children = dig(key, level - 1);
-        } else {
-          treeNode.isLeaf = true;
-        }
-
-        list.push(treeNode);
-      }
-      return list;
-    };
-
-    this.nodes = dig();
-  }
+export class NzDemoTreeSelectVirtualScrollComponent {
+  nodes: NzTreeNodeOptions[] = dig();
 }
diff --git a/components/tree-view/demo/basic.ts b/components/tree-view/demo/basic.ts
@@ -2,7 +2,8 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { Component } from '@angular/core';
 
-import { NzTreeFlatDataSource, NzTreeFlattener } from 'ng-zorro-antd/tree-view';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzTreeFlatDataSource, NzTreeFlattener, NzTreeViewModule } from 'ng-zorro-antd/tree-view';
 
 interface TreeNode {
   name: string;
@@ -36,6 +37,8 @@ interface FlatNode {
 
 @Component({
   selector: 'nz-demo-tree-view-basic',
+  standalone: true,
+  imports: [NzIconModule, NzTreeViewModule],
   template: `
     <nz-tree-view [nzTreeControl]="treeControl" [nzDataSource]="dataSource">
       <nz-tree-node *nzTreeNodeDef="let node" nzTreeNodePadding>

diff --git a/components/tree-view/demo/checkbox.ts b/components/tree-view/demo/checkbox.ts
@@ -2,7 +2,8 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { Component } from '@angular/core';
 
-import { NzTreeFlatDataSource, NzTreeFlattener } from 'ng-zorro-antd/tree-view';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzTreeFlatDataSource, NzTreeFlattener, NzTreeViewModule } from 'ng-zorro-antd/tree-view';
 
 interface TreeNode {
   name: string;
@@ -40,6 +41,8 @@ interface FlatNode {
 
 @Component({
   selector: 'nz-demo-tree-view-checkbox',
+  standalone: true,
+  imports: [NzIconModule, NzTreeViewModule],
   template: `
     <nz-tree-view [nzTreeControl]="treeControl" [nzDataSource]="dataSource">
       <nz-tree-node *nzTreeNodeDef="let node" nzTreeNodePadding>

diff --git a/components/tree-view/demo/directory.ts b/components/tree-view/demo/directory.ts
@@ -2,7 +2,8 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { AfterViewInit, Component } from '@angular/core';
 
-import { NzTreeFlatDataSource, NzTreeFlattener } from 'ng-zorro-antd/tree-view';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzTreeFlatDataSource, NzTreeFlattener, NzTreeViewModule } from 'ng-zorro-antd/tree-view';
 
 interface FoodNode {
   name: string;
@@ -40,6 +41,8 @@ interface ExampleFlatNode {
 
 @Component({
   selector: 'nz-demo-tree-view-directory',
+  standalone: true,
+  imports: [NzIconModule, NzTreeViewModule],
   template: `
     <nz-tree-view [nzTreeControl]="treeControl" [nzDataSource]="dataSource" [nzDirectoryTree]="true">
       <nz-tree-node *nzTreeNodeDef="let node" nzTreeNodePadding>