refactor(module:alert): migrate demo to standalone mode (NG-ZORRO#8726)

Laffery · Sep 5, 2024 · 302e900 · 302e900
1 parent fbb3db6
commit 302e900
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 15 deletions.
diff --git a/components/alert/alert.spec.ts b/components/alert/alert.spec.ts
@@ -1,4 +1,4 @@
-import { BidiModule, Dir } from '@angular/cdk/bidi';
+import { BidiModule, Dir, Direction } from '@angular/cdk/bidi';
 import { ChangeDetectorRef, Component, DebugElement, TemplateRef, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
@@ -204,7 +204,7 @@ export class NzDemoTestBannerComponent {}
 })
 export class NzTestAlertRtlComponent {
   @ViewChild(Dir) dir!: Dir;
-  direction = 'rtl';
+  direction: Direction = 'rtl';
 }
 
 @Component({

diff --git a/components/alert/demo/action.ts b/components/alert/demo/action.ts
@@ -1,7 +1,13 @@
 import { Component } from '@angular/core';
 
+import { NzAlertModule } from 'ng-zorro-antd/alert';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
+
 @Component({
+  standalone: true,
   selector: 'nz-demo-alert-action',
+  imports: [NzAlertModule, NzButtonModule, NzSpaceModule],
   template: `
     <nz-alert nzShowIcon nzType="success" nzMessage="Success Text" [nzAction]="actionTemplate1"></nz-alert>
     <ng-template #actionTemplate1>

diff --git a/components/alert/demo/banner.ts b/components/alert/demo/banner.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzAlertModule } from 'ng-zorro-antd/alert';
+
 @Component({
+  standalone: true,
   selector: 'nz-demo-alert-banner',
+  imports: [NzAlertModule],
   template: `
     <nz-alert nzBanner nzMessage="Warning text"></nz-alert>
     <nz-alert

diff --git a/components/alert/demo/basic.ts b/components/alert/demo/basic.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzAlertModule } from 'ng-zorro-antd/alert';
+
 @Component({
+  standalone: true,
   selector: 'nz-demo-alert-basic',
+  imports: [NzAlertModule],
   template: ` <nz-alert nzType="success" nzMessage="Success Text"></nz-alert> `
 })
 export class NzDemoAlertBasicComponent {}
diff --git a/components/alert/demo/closable.ts b/components/alert/demo/closable.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzAlertModule } from 'ng-zorro-antd/alert';
+
 @Component({
+  standalone: true,
   selector: 'nz-demo-alert-closable',
+  imports: [NzAlertModule],
   template: `
     <nz-alert
       nzType="warning"

diff --git a/components/alert/demo/close-text.ts b/components/alert/demo/close-text.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzAlertModule } from 'ng-zorro-antd/alert';
+
 @Component({
+  standalone: true,
   selector: 'nz-demo-alert-close-text',
+  imports: [NzAlertModule],
   template: ` <nz-alert nzType="info" nzMessage="Info Text" nzCloseText="Close Now"></nz-alert> `
 })
 export class NzDemoAlertCloseTextComponent {}
diff --git a/components/alert/demo/custom-icon.ts b/components/alert/demo/custom-icon.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzAlertModule } from 'ng-zorro-antd/alert';
+
 @Component({
+  standalone: true,
   selector: 'nz-demo-alert-custom-icon',
+  imports: [NzAlertModule],
   template: `
     <nz-alert
       nzType="success"
@@ -14,13 +18,6 @@ import { Component } from '@angular/core';
     <ng-template #customIconTemplate>
       <div> S </div>
     </ng-template>
-  `,
-  styles: [
-    `
-      nz-alert {
-        margin-bottom: 16px;
-      }
-    `
-  ]
+  `
 })
 export class NzDemoAlertCustomIconComponent {}
diff --git a/components/alert/demo/description.ts b/components/alert/demo/description.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzAlertModule } from 'ng-zorro-antd/alert';
+
 @Component({
+  standalone: true,
   selector: 'nz-demo-alert-description',
+  imports: [NzAlertModule],
   template: `
     <nz-alert
       nzType="success"

diff --git a/components/alert/demo/icon.ts b/components/alert/demo/icon.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzAlertModule } from 'ng-zorro-antd/alert';
+
 @Component({
+  standalone: true,
   selector: 'nz-demo-alert-icon',
+  imports: [NzAlertModule],
   template: `
     <nz-alert nzType="success" nzMessage="Success Tips" nzShowIcon></nz-alert>
     <nz-alert nzType="info" nzMessage="Informational Notes" nzShowIcon></nz-alert>

diff --git a/components/alert/demo/module b/components/alert/demo/module
diff --git a/components/alert/demo/style.ts b/components/alert/demo/style.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzAlertModule } from 'ng-zorro-antd/alert';
+
 @Component({
+  standalone: true,
   selector: 'nz-demo-alert-style',
+  imports: [NzAlertModule],
   template: `
     <nz-alert nzType="success" nzMessage="Success Text"></nz-alert>
     <nz-alert nzType="info" nzMessage="Info Text"></nz-alert>