refactor(module:message,notification): migrate demo to standalone mode (

#8795)

* refactor(module:message): migrate demo to standalone mode

* refactor(module:notification): migrate demo to standalone mode

components/message/demo/close.ts

@@ -1,13 +1,14 @@
 import { Component } from '@angular/core';
 import { concatMap } from 'rxjs/operators';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
 @Component({
   selector: 'nz-demo-message-close',
-  template: `
-    <button nz-button [nzType]="'default'" (click)="startShowMessages()">Display a sequence of messages</button>
-  `
+  standalone: true,
+  imports: [NzButtonModule],
+  template: `<button nz-button nzType="default" (click)="startShowMessages()">Display a sequence of messages</button>`
 })
 export class NzDemoMessageCloseComponent {
   constructor(private message: NzMessageService) {}

components/message/demo/duration.ts

@@ -1,12 +1,13 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
 @Component({
   selector: 'nz-demo-message-duration',
-  template: `
-    <button nz-button [nzType]="'default'" (click)="createBasicMessage()">Customized display duration</button>
-  `
+  standalone: true,
+  imports: [NzButtonModule],
+  template: `<button nz-button nzType="default" (click)="createBasicMessage()">Customized display duration</button>`
 })
 export class NzDemoMessageDurationComponent {
   createBasicMessage(): void {

components/message/demo/info.ts

@@ -1,10 +1,13 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
 @Component({
   selector: 'nz-demo-message-info',
-  template: ` <button nz-button [nzType]="'primary'" (click)="createBasicMessage()">Display normal message</button> `
+  standalone: true,
+  imports: [NzButtonModule],
+  template: `<button nz-button nzType="primary" (click)="createBasicMessage()">Display normal message</button>`
 })
 export class NzDemoMessageInfoComponent {
   constructor(private message: NzMessageService) {}

components/message/demo/loading.ts

@@ -1,12 +1,13 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
 @Component({
   selector: 'nz-demo-message-loading',
-  template: `
-    <button nz-button [nzType]="'default'" (click)="createBasicMessage()">Display a loading indicator</button>
-  `
+  standalone: true,
+  imports: [NzButtonModule],
+  template: `<button nz-button nzType="default" (click)="createBasicMessage()">Display a loading indicator</button>`
 })
 export class NzDemoMessageLoadingComponent {
   constructor(private message: NzMessageService) {}

components/message/demo/other.ts

@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
 @Component({
   selector: 'nz-demo-message-other',
+  standalone: true,
+  imports: [NzButtonModule],
   template: `
     <button nz-button (click)="createMessage('success')">Success</button>
     <button nz-button (click)="createMessage('error')">Error</button>

components/message/message.spec.ts

@@ -1,17 +1,14 @@
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { Component, TemplateRef, ViewChild } from '@angular/core';
-import { ComponentFixture, fakeAsync, inject, tick } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
 
-import { NZ_CONFIG, NzConfigService } from 'ng-zorro-antd/core/config';
+import { NzConfigService, provideNzConfig } from 'ng-zorro-antd/core/config';
 import { dispatchMouseEvent } from 'ng-zorro-antd/core/testing';
-import { ComponentBed, createComponentBed } from 'ng-zorro-antd/core/testing/component-bed';
 
-import { NzMessageModule } from './message.module';
 import { NzMessageService } from './message.service';
 
 describe('message', () => {
-  let testBed: ComponentBed<NzTestMessageComponent>;
   let messageService: NzMessageService;
   let overlayContainer: OverlayContainer;
   let overlayContainerElement: HTMLElement;
@@ -20,23 +17,12 @@ describe('message', () => {
   let configService: NzConfigService;
 
   beforeEach(fakeAsync(() => {
-    testBed = createComponentBed(NzTestMessageComponent, {
-      imports: [NzMessageModule, NoopAnimationsModule],
-      providers: [
-        {
-          provide: NZ_CONFIG,
-          useValue: {
-            message: {
-              nzMaxStack: 2,
-              nzTop: 24
-            }
-          }
-        }
-      ]
-    });
+    TestBed.configureTestingModule({
+      providers: [provideNoopAnimations(), provideNzConfig({ message: { nzMaxStack: 2, nzTop: 24 } }), NzMessageService]
+    }).compileComponents();
 
-    fixture = testBed.fixture;
-    testComponent = testBed.component;
+    fixture = TestBed.createComponent(NzTestMessageComponent);
+    testComponent = fixture.componentInstance;
   }));
 
   beforeEach(inject(
@@ -221,7 +207,8 @@ describe('message', () => {
 });
 
 @Component({
-  template: ` <ng-template #contentTemplate>Content in template</ng-template> `
+  standalone: true,
+  template: `<ng-template #contentTemplate>Content in template</ng-template>`
 })
 export class NzTestMessageComponent {
   @ViewChild('contentTemplate', { static: true }) template!: TemplateRef<void>;

components/notification/demo/basic.ts

@@ -1,17 +1,18 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
 
 @Component({
   selector: 'nz-demo-notification-basic',
-  template: `
-    <button nz-button [nzType]="'primary'" (click)="createBasicNotification()">Open the notification box</button>
-  `
+  standalone: true,
+  imports: [NzButtonModule],
+  template: `<button nz-button nzType="primary" (click)="createNotification()">Open the notification box</button>`
 })
 export class NzDemoNotificationBasicComponent {
   constructor(private notification: NzNotificationService) {}
 
-  createBasicNotification(): void {
+  createNotification(): void {
     this.notification
       .blank(
         'Notification Title',

components/notification/demo/custom-icon.ts

@@ -1,9 +1,13 @@
 import { Component, TemplateRef } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
 
 @Component({
   selector: 'nz-demo-notification-custom-icon',
+  standalone: true,
+  imports: [NzIconModule, NzButtonModule],
   template: `
     <ng-template #template>
       <div class="ant-notification-notice-content">
@@ -19,15 +23,13 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
         </div>
       </div>
     </ng-template>
-    <button nz-button [nzType]="'primary'" (click)="createBasicNotification(template)">
-      Open the notification box
-    </button>
+    <button nz-button nzType="primary" (click)="createNotification(template)">Open the notification box</button>
   `
 })
 export class NzDemoNotificationCustomIconComponent {
   constructor(private notification: NzNotificationService) {}
 
-  createBasicNotification(template: TemplateRef<{}>): void {
+  createNotification(template: TemplateRef<{}>): void {
     this.notification.template(template);
   }
 }

components/notification/demo/custom-style.ts

@@ -1,17 +1,18 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
 
 @Component({
   selector: 'nz-demo-notification-custom-style',
-  template: `
-    <button nz-button [nzType]="'primary'" (click)="createBasicNotification()">Open the notification box</button>
-  `
+  standalone: true,
+  imports: [NzButtonModule],
+  template: `<button nz-button nzType="primary" (click)="createNotification()">Open the notification box</button>`
 })
 export class NzDemoNotificationCustomStyleComponent {
   constructor(private notification: NzNotificationService) {}
 
-  createBasicNotification(): void {
+  createNotification(): void {
     this.notification.blank(
       'Notification Title',
       'This is the content of the notification. This is the content of the notification. This is the content of the notification.',

components/notification/demo/duration.ts

@@ -1,21 +1,22 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
 
 @Component({
   selector: 'nz-demo-notification-duration',
-  template: `
-    <button nz-button [nzType]="'primary'" (click)="createBasicNotification()">Open the notification box</button>
-  `
+  standalone: true,
+  imports: [NzButtonModule],
+  template: `<button nz-button nzType="primary" (click)="createNotification()">Open the notification box</button>`
 })
 export class NzDemoNotificationDurationComponent {
-  createBasicNotification(): void {
+  constructor(private notification: NzNotificationService) {}
+
+  createNotification(): void {
     this.notification.blank(
       'Notification Title',
       'I will never close automatically. This is a purposely very very long description that has many many characters and words.',
       { nzDuration: 0 }
     );
   }
-
-  constructor(private notification: NzNotificationService) {}
 }

components/notification/demo/placement.ts

@@ -1,33 +1,38 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzNotificationPlacement, NzNotificationService } from 'ng-zorro-antd/notification';
 
 @Component({
   selector: 'nz-demo-notification-placement',
+  standalone: true,
+  imports: [NzButtonModule, NzDividerModule, NzIconModule],
   template: `
-    <button nz-button (click)="createBasicNotification('top')" nzType="primary">
+    <button nz-button (click)="createNotification('top')" nzType="primary">
       <span nz-icon nzType="border-top" nzTheme="outline"></span>
       top
     </button>
-    <button nz-button (click)="createBasicNotification('bottom')" nzType="primary">
+    <button nz-button (click)="createNotification('bottom')" nzType="primary">
       <span nz-icon nzType="border-bottom" nzTheme="outline"></span>
       bottom
     </button>
     <nz-divider></nz-divider>
-    <button nz-button (click)="createBasicNotification('topLeft')" nzType="primary">
+    <button nz-button (click)="createNotification('topLeft')" nzType="primary">
       <span nz-icon nzType="radius-upleft"></span>
       topLeft
     </button>
-    <button nz-button (click)="createBasicNotification('topRight')" nzType="primary">
+    <button nz-button (click)="createNotification('topRight')" nzType="primary">
       <span nz-icon nzType="radius-upright"></span>
       topRight
     </button>
     <nz-divider></nz-divider>
-    <button nz-button (click)="createBasicNotification('bottomLeft')" nzType="primary">
+    <button nz-button (click)="createNotification('bottomLeft')" nzType="primary">
       <span nz-icon nzType="radius-bottomleft"></span>
       bottomLeft
     </button>
-    <button nz-button (click)="createBasicNotification('bottomRight')" nzType="primary">
+    <button nz-button (click)="createNotification('bottomRight')" nzType="primary">
       <span nz-icon nzType="radius-bottomright"></span>
       bottomRight
     </button>
@@ -43,13 +48,13 @@ import { NzNotificationPlacement, NzNotificationService } from 'ng-zorro-antd/no
 export class NzDemoNotificationPlacementComponent {
   placement = 'topRight';
 
-  createBasicNotification(position: NzNotificationPlacement): void {
+  constructor(private notification: NzNotificationService) {}
+
+  createNotification(position: NzNotificationPlacement): void {
     this.notification.blank(
       'Notification Title',
       'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
       { nzPlacement: position }
     );
   }
-
-  constructor(private notification: NzNotificationService) {}
 }

components/notification/demo/template.ts

@@ -1,11 +1,15 @@
 import { Component, TemplateRef, ViewChild } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
+import { NzTagModule } from 'ng-zorro-antd/tag';
 
 @Component({
   selector: 'nz-demo-notification-template',
+  standalone: true,
+  imports: [NzButtonModule, NzTagModule],
   template: `
-    <button nz-button [nzType]="'primary'" (click)="ninja()">Open the notification box</button>
+    <button nz-button nzType="primary" (click)="createNotification()">Open the notification box</button>
     <ng-template let-fruit="data">
       It's a
       <nz-tag [nzColor]="fruit.color">{{ fruit.name }}</nz-tag>
@@ -23,7 +27,9 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
 export class NzDemoNotificationTemplateComponent {
   @ViewChild(TemplateRef, { static: false }) template?: TemplateRef<{}>;
 
-  ninja(): void {
+  constructor(private notificationService: NzNotificationService) {}
+
+  createNotification(): void {
     const fruits = [
       { name: 'Apple', color: 'red' },
       { name: 'Orange', color: 'orange' },
@@ -34,6 +40,4 @@ export class NzDemoNotificationTemplateComponent {
       this.notificationService.template(this.template!, { nzData: fruit });
     });
   }
-
-  constructor(private notificationService: NzNotificationService) {}
 }

components/notification/demo/update.ts

@@ -1,19 +1,18 @@
 import { Component } from '@angular/core';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
 
 @Component({
   selector: 'nz-demo-notification-update',
-  template: `
-    <button nz-button [nzType]="'primary'" (click)="createAutoUpdatingNotifications()">
-      Open the notification box
-    </button>
-  `
+  standalone: true,
+  imports: [NzButtonModule],
+  template: ` <button nz-button nzType="primary" (click)="createNotification()"> Open the notification box </button> `
 })
 export class NzDemoNotificationUpdateComponent {
   constructor(private notification: NzNotificationService) {}
 
-  createAutoUpdatingNotifications(): void {
+  createNotification(): void {
     this.notification.blank('Notification Title', 'Description.', {
       nzKey: 'key'
     });