feat(module:alert): support nzAction for customizing actions (#7246)

Author: yangjunhan

components/alert/alert.component.ts

@@ -61,6 +61,9 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'alert';
           <ng-container *nzStringTemplateOutlet="nzDescription">{{ nzDescription }}</ng-container>
         </span>
       </div>
+      <div class="ant-alert-action" *ngIf="nzAction">
+        <ng-container *nzStringTemplateOutlet="nzAction">{{ nzAction }}</ng-container>
+      </div>
       <button
         type="button"
         tabindex="0"
@@ -90,6 +93,7 @@ export class NzAlertComponent implements OnChanges, OnDestroy, OnInit {
   static ngAcceptInputType_nzBanner: BooleanInput;
   static ngAcceptInputType_nzNoAnimation: BooleanInput;
 
+  @Input() nzAction: string | TemplateRef<void> | null = null;
   @Input() nzCloseText: string | TemplateRef<void> | null = null;
   @Input() nzIconType: string | null = null;
   @Input() nzMessage: string | TemplateRef<void> | null = null;

components/alert/alert.spec.ts

@@ -104,6 +104,12 @@ describe('alert', () => {
         expect(alert.nativeElement.querySelector('.ant-alert').classList).toContain(`ant-alert-${type}`);
       });
     });
+    it('should action work', () => {
+      fixture.detectChanges();
+      testComponent.action = testComponent.template;
+      fixture.detectChanges();
+      expect(alert.nativeElement.querySelector('.ant-alert-action').classList).not.toBeNull();
+    });
   });
   describe('banner alert', () => {
     let fixture: ComponentFixture<NzDemoTestBannerComponent>;
@@ -149,12 +155,14 @@ describe('alert', () => {
       [nzShowIcon]="showIcon"
       [nzIconType]="iconType"
       [nzType]="type"
+      [nzAction]="action"
       (nzOnClose)="onClose($event)"
     ></nz-alert>
   `
 })
 export class NzDemoTestBasicComponent {
   @ViewChild('template', { static: false }) template!: TemplateRef<void>;
+  action?: string | TemplateRef<void>;
   banner = false;
   closeable = false;
   closeText?: string | TemplateRef<void>;

components/alert/demo/action.md

@@ -0,0 +1,14 @@
+---
+order: 7
+title:
+    zh-CN: 操作
+    en-US: Custom action
+---
+
+## zh-CN
+
+可以在右上角自定义操作项。
+
+## en-US
+
+Custom action.

components/alert/demo/action.ts

@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-alert-action',
+  template: `
+    <nz-alert nzShowIcon nzType="success" nzMessage="Success Text" [nzAction]="actionTemplate1"></nz-alert>
+    <ng-template #actionTemplate1>
+      <button nz-button nzSize="small" nzType="text" (click)="doAction('undo')">Undo</button></ng-template
+    >
+    <br />
+    <nz-alert
+      nzShowIcon
+      nzType="error"
+      nzMessage="Error Text"
+      [nzDescription]="descriptionTemplate1"
+      [nzAction]="actionTemplate2"
+    ></nz-alert>
+    <ng-template #descriptionTemplate1>
+      <p>Error Description Error Description Error Description Error Description</p>
+    </ng-template>
+    <ng-template #actionTemplate2>
+      <button nz-button nzSize="small" nzType="default" nzDanger (click)="doAction('detail')">Detail</button>
+    </ng-template>
+    <br />
+    <nz-alert nzCloseable nzType="warning" nzMessage="Warning Text" [nzAction]="actionTemplate3"></nz-alert>
+    <ng-template #actionTemplate3>
+      <button nz-button nzSize="small" nzType="primary" nzGhost (click)="doAction('ignore')">Ignore</button>
+    </ng-template>
+    <br />
+    <nz-alert
+      nzShowIcon
+      nzType="info"
+      nzMessage="Info Text"
+      [nzDescription]="descriptionTemplate2"
+      [nzAction]="actionTemplate4"
+    ></nz-alert>
+    <ng-template #descriptionTemplate2>
+      <p>Info Description Info Description Info Description Info Description</p>
+    </ng-template>
+    <ng-template #actionTemplate4>
+      <nz-space nzDirection="vertical">
+        <button *nzSpaceItem nz-button nzSize="small" nzType="primary" (click)="doAction('accept')">Accept</button>
+        <button *nzSpaceItem nz-button nzSize="small" nzType="default" nzDanger (click)="doAction('decline')"
+          >Decline</button
+        >
+      </nz-space>
+    </ng-template>
+  `
+})
+export class NzDemoAlertActionComponent {
+  doAction(action: string): void {
+    console.log(`Do alert's action: ${action}`);
+  }
+}

components/alert/demo/module

@@ -1,3 +1,5 @@
 import { NzAlertModule } from 'ng-zorro-antd/alert';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
 
-export const moduleList = [ NzAlertModule ];
+export const moduleList = [ NzAlertModule, NzButtonModule, NzSpaceModule ];

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

@@ -23,6 +23,7 @@ import { NzAlertModule } from 'ng-zorro-antd/alert';
 | Property | Description | Type | Default | Global Config |
 | -------- | ----------- | ---- | ------- | ------------- |
 | `[nzBanner]` | Whether to show as banner | `boolean` | `false` |
+| `[nzAction]` | Customized alert's action | `string \| TemplateRef<void>` | - |
 | `[nzCloseable]` | Whether Alert can be closed | `boolean` | - | ✅ |
 | `[nzCloseText]` | Close text to show | `string \| TemplateRef<void>` | - |
 | `[nzDescription]` | Additional content of Alert | `string \| TemplateRef<void>` | - |

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

@@ -24,6 +24,7 @@ import { NzAlertModule } from 'ng-zorro-antd/alert';
 | 参数 | 说明 | 类型 | 默认值 | 全局配置 |
 | --- | --- | --- | --- | --- |
 | `[nzBanner]` | 是否用作顶部公告 | `boolean` | `false` |
+| `[nzAction]` | 自定义操作项 | `string \| TemplateRef<void>` | - |
 | `[nzCloseable]` | 默认不显示关闭按钮 | `boolean` | - | ✅ |
 | `[nzCloseText]` | 自定义关闭按钮 | `string \| TemplateRef<void>` | - |
 | `[nzDescription]` | 警告提示的辅助性文字介绍 | `string \| TemplateRef<void>` | - |