feat(module:notification): display nzData when content is a template (

#9001)

components/message/demo/template.md

@@ -0,0 +1,16 @@
+---
+order: 5
+title:
+  zh-CN: 自定义模板
+  en-US: Custom Template
+---
+
+## zh-CN
+
+您可以为消息内容创建自定义模板。
+通过 `nzData` 选项，您可以传递一些可选的数据给此自定义模板。
+
+## en-US
+
+You can have a custom template for the message content.
+You would have the possibility to pass some optional data to this custom template thanks to the `nzData` option

components/message/demo/template.ts

@@ -0,0 +1,25 @@
+import { Component, TemplateRef, ViewChild } from '@angular/core';
+
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzMessageComponent, NzMessageService } from 'ng-zorro-antd/message';
+
+@Component({
+  selector: 'nz-demo-message-template',
+  imports: [NzButtonModule],
+  template: `
+    <button nz-button nzType="default" (click)="showMessage()">Display a custom template</button>
+    <ng-template #customTemplate let-data="data">My Favorite Framework is {{ data }}</ng-template>
+  `
+})
+export class NzDemoMessageTemplateComponent {
+  @ViewChild('customTemplate', { static: true }) customTemplate!: TemplateRef<{
+    $implicit: NzMessageComponent;
+    data: string;
+  }>;
+
+  constructor(private message: NzMessageService) {}
+
+  showMessage(): void {
+    this.message.success(this.customTemplate, { nzData: 'Angular' });
+  }
+}

components/message/doc/index.en-US.md

@@ -38,11 +38,12 @@ This components provides some service methods, with usage and arguments as follo
 
 The parameters that are set by the `options` support are as follows:
 
-| Argument       | Description                                                            | Type      |
-| -------------- | ---------------------------------------------------------------------- | --------- |
-| nzDuration     | Duration (milliseconds), does not disappear when set to 0              | `number`  |
-| nzPauseOnHover | Do not remove automatically when mouse is over while setting to `true` | `boolean` |
-| nzAnimate      | Whether to turn on animation                                           | `boolean` |
+| Argument      | Description                                                           | Type        |
+|---------------|-----------------------------------------------------------------------|-------------|
+| nzDuration    | Duration (milliseconds), does not disappear when set to 0             | `number`    |
+| nzPauseOnHover | Do not remove automatically when mouse is over while setting to `true` | `boolean`   |
+| nzAnimate     | Whether to turn on animation                                          | `boolean`   |
+| nzData        | Data to pass to custom template                                       | `NzSafeAny` |
 
 Methods for destruction are also provided:
 

components/message/doc/index.zh-CN.md

@@ -44,6 +44,7 @@ private readonly message = inject(NzMessageService);
 | nzDuration     | 持续时间(毫秒)，当设置为0时不消失 | `number`  |
 | nzPauseOnHover | 鼠标移上时禁止自动移除            | `boolean` |
 | nzAnimate      | 开关动画效果                      | `boolean` |
+| nzData        | 传递给自定义模板的数据                                       | `NzSafeAny` |
 
 还提供了全局销毁方法：
 

components/message/message.component.ts

@@ -55,7 +55,9 @@ import { NzMessageData } from './typings';
               <nz-icon nzType="loading" />
             }
           }
-          <ng-container *nzStringTemplateOutlet="instance.content">
+          <ng-container
+            *nzStringTemplateOutlet="instance.content; context: { $implicit: this, data: instance.options?.nzData }"
+          >
             <span [innerHTML]="instance.content"></span>
           </ng-container>
         </div>

components/message/message.service.ts

@@ -6,11 +6,9 @@
 import { Overlay } from '@angular/cdk/overlay';
 import { Injectable, Injector } from '@angular/core';
 
-import { NzTSType } from 'ng-zorro-antd/core/types';
-
 import { NzMNService } from './base';
 import { NzMessageContainerComponent } from './message-container.component';
-import { NzMessageData, NzMessageDataOptions, NzMessageRef, NzMessageType } from './typings';
+import { NzMessageContentType, NzMessageData, NzMessageDataOptions, NzMessageRef, NzMessageType } from './typings';
 
 @Injectable({
   providedIn: 'root'
@@ -22,27 +20,27 @@ export class NzMessageService extends NzMNService<NzMessageContainerComponent> {
     super(overlay, injector);
   }
 
-  success(content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {
+  success(content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {
     return this.createInstance({ type: 'success', content }, options);
   }
 
-  error(content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {
+  error(content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {
     return this.createInstance({ type: 'error', content }, options);
   }
 
-  info(content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {
+  info(content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {
     return this.createInstance({ type: 'info', content }, options);
   }
 
-  warning(content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {
+  warning(content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {
     return this.createInstance({ type: 'warning', content }, options);
   }
 
-  loading(content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {
+  loading(content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {
     return this.createInstance({ type: 'loading', content }, options);
   }
 
-  create(type: NzMessageType | string, content: NzTSType, options?: NzMessageDataOptions): NzMessageRef {
+  create(type: NzMessageType | string, content: NzMessageContentType, options?: NzMessageDataOptions): NzMessageRef {
     return this.createInstance({ type, content }, options);
   }
 

components/message/message.spec.ts

@@ -11,6 +11,7 @@ import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import { NzConfigService, provideNzConfig } from 'ng-zorro-antd/core/config';
 import { dispatchMouseEvent } from 'ng-zorro-antd/core/testing';
 
+import { NzMessageComponent } from './message.component';
 import { NzMessageService } from './message.service';
 
 describe('message', () => {
@@ -91,11 +92,11 @@ describe('message', () => {
   });
 
   it('should support template', fakeAsync(() => {
-    messageService.info(testComponent.template);
+    messageService.info(testComponent.template, { nzData: 'from template' });
     fixture.detectChanges();
     overlayContainerElement = overlayContainer.getContainerElement();
 
-    expect(overlayContainerElement.textContent).toContain('Content in template');
+    expect(overlayContainerElement.textContent).toContain('Content in templatefrom template');
     tick(10000);
   }));
 
@@ -210,8 +211,11 @@ describe('message', () => {
 });
 
 @Component({
-  template: `<ng-template #contentTemplate>Content in template</ng-template>`
+  template: ` <ng-template #contentTemplate let-data="data">Content in template{{ data }}</ng-template>`
 })
 export class NzTestMessageComponent {
-  @ViewChild('contentTemplate', { static: true }) template!: TemplateRef<void>;
+  @ViewChild('contentTemplate', { static: true }) template!: TemplateRef<{
+    $implicit: NzMessageComponent;
+    data: string;
+  }>;
 }

components/message/typings.ts

@@ -6,22 +6,28 @@
 import { TemplateRef } from '@angular/core';
 import { Subject } from 'rxjs';
 
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
+
+import { NzMNComponent } from './base';
+
 export type NzMessageType = 'success' | 'info' | 'warning' | 'error' | 'loading';
 
+export type NzMessageContentType = string | TemplateRef<void | { $implicit: NzMNComponent; data: NzSafeAny }>;
+
 export interface NzMessageDataOptions {
   nzDuration?: number;
   nzAnimate?: boolean;
   nzPauseOnHover?: boolean;
+  nzData?: NzSafeAny;
 }
 
 export interface NzMessageData {
   type?: NzMessageType | string;
-  content?: string | TemplateRef<void>;
+  content?: NzMessageContentType;
   messageId?: string;
   createdAt?: Date;
   options?: NzMessageDataOptions;
   state?: 'enter' | 'leave';
-
   onClose?: Subject<boolean>;
 }
 

components/notification/demo/custom-icon.ts

@@ -2,7 +2,7 @@ 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';
+import { type NzNotificationComponent, NzNotificationService } from 'ng-zorro-antd/notification';
 
 @Component({
   selector: 'nz-demo-notification-custom-icon',
@@ -28,7 +28,7 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
 export class NzDemoNotificationCustomIconComponent {
   constructor(private notification: NzNotificationService) {}
 
-  createNotification(template: TemplateRef<{}>): void {
+  createNotification(template: TemplateRef<{ $implicit: NzNotificationComponent; data: undefined }>): void {
     this.notification.template(template);
   }
 }

components/notification/demo/template.ts

@@ -1,7 +1,7 @@
 import { Component, TemplateRef, ViewChild } from '@angular/core';
 
 import { NzButtonModule } from 'ng-zorro-antd/button';
-import { NzNotificationService } from 'ng-zorro-antd/notification';
+import { type NzNotificationComponent, NzNotificationService } from 'ng-zorro-antd/notification';
 import { NzTagModule } from 'ng-zorro-antd/tag';
 
 @Component({
@@ -24,7 +24,10 @@ import { NzTagModule } from 'ng-zorro-antd/tag';
   ]
 })
 export class NzDemoNotificationTemplateComponent {
-  @ViewChild(TemplateRef, { static: false }) template?: TemplateRef<{}>;
+  @ViewChild(TemplateRef, { static: false }) template?: TemplateRef<{
+    $implicit: NzNotificationComponent;
+    data: Array<{ name: string; color: string }>;
+  }>;
 
   constructor(private notificationService: NzNotificationService) {}
 

components/notification/doc/index.en-US.md

@@ -36,16 +36,16 @@ The component provides a number of service methods using the following methods a
 - `NzNotificationService.info(title, content, [options])`
 - `NzNotificationService.warning(title, content, [options])`
 
-| Argument | Description                                                                          | Type                          | Default |
-| -------- | ------------------------------------------------------------------------------------ | ----------------------------- | ------- |
-| title    | Title                                                                                | `string \| TemplateRef<void>` | -       |
-| content  | Notification content                                                                 | `string \| TemplateRef<void>` | -       |
-| options  | Support setting the parameters for the current notification box, see the table below | `object`                      | -       |
+| Argument | Description                                                                          | Type                                                                              | Default |
+|----------|--------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------|---------|
+| title    | Title                                                                                | `string \| TemplateRef<void>`                                                     | -       |
+| content  | Notification content                                                                 | `NzNotificationContentType` | -       |
+| options  | Support setting the parameters for the current notification box, see the table below | `object`                                                                          | -       |
 
 The parameters that are set by the `options` support are as follows:
 
 | Argument       | Description                                                            | Type                                                            |
-| -------------- | ---------------------------------------------------------------------- | --------------------------------------------------------------- |
+|----------------|------------------------------------------------------------------------|-----------------------------------------------------------------|
 | nzKey          | The unique identifier of the Notification                              | `string`                                                        |
 | nzDuration     | Duration (milliseconds), does not disappear when set to 0              | `number`                                                        |
 | nzPauseOnHover | Do not remove automatically when mouse is over while setting to `true` | `boolean`                                                       |
@@ -65,7 +65,7 @@ Methods for destruction are also provided:
 You can use `NzConfigService` to configure this component globally. Please check the [Global Configuration](/docs/global-config/en) chapter for more information.
 
 | Parameter      | Description                                                                             | Type             | Default    |
-| -------------- | --------------------------------------------------------------------------------------- | ---------------- | ---------- |
+|----------------|-----------------------------------------------------------------------------------------|------------------|------------|
 | nzDuration     | Duration (milliseconds), does not disappear when set to 0                               | `number`         | 4500       |
 | nzMaxStack     | The maximum number of notifications that can be displayed at the same time              | `number`         | 8          |
 | nzPauseOnHover | Do not remove automatically when mouse is over while setting to `true`                  | `boolean`        | `true`     |