diff --git a/components/popconfirm/nz-popconfirm.component.ts b/components/popconfirm/nz-popconfirm.component.ts
index f046a36e4f8..0ffd44d0391 100644
--- a/components/popconfirm/nz-popconfirm.component.ts
+++ b/components/popconfirm/nz-popconfirm.component.ts
@@ -1,4 +1,13 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ EventEmitter,
+ Input,
+ Output,
+ TemplateRef,
+ ViewEncapsulation
+} from '@angular/core';
import { zoomBigMotion } from '../core/animation/zoom';
import { InputBoolean } from '../core/util/convert';
import { NzToolTipComponent } from '../tooltip/nz-tooltip.component';
@@ -25,6 +34,7 @@ export class NzPopconfirmComponent extends NzToolTipComponent {
@Input() nzOkType: string = 'primary';
@Input() nzCancelText: string;
@Input() @InputBoolean() nzCondition = false;
+ @Input() nzIcon: string | TemplateRef
;
@Output() readonly nzOnCancel: EventEmitter = new EventEmitter();
@Output() readonly nzOnConfirm: EventEmitter = new EventEmitter();
diff --git a/components/popconfirm/nz-popconfirm.directive.ts b/components/popconfirm/nz-popconfirm.directive.ts
index 7dccc4bdcf4..a443ca79a80 100644
--- a/components/popconfirm/nz-popconfirm.directive.ts
+++ b/components/popconfirm/nz-popconfirm.directive.ts
@@ -8,7 +8,7 @@ import {
OnInit,
Optional,
Output,
- Renderer2,
+ Renderer2, TemplateRef,
ViewContainerRef
} from '@angular/core';
@@ -40,12 +40,14 @@ export class NzPopconfirmDirective extends NzTooltipDirective implements OnInit
'nzOkText',
'nzOkType',
'nzCancelText',
- 'nzCondition'
+ 'nzCondition',
+ 'nzIcon'
];
@Input() nzOkText: string;
@Input() nzOkType: string;
@Input() nzCancelText: string;
+ @Input() nzIcon: string | TemplateRef;
@Input() @InputBoolean() nzCondition: boolean;
@Output() readonly nzOnCancel = new EventEmitter();
@Output() readonly nzOnConfirm = new EventEmitter();
diff --git a/components/popconfirm/nz-popconfirm.module.ts b/components/popconfirm/nz-popconfirm.module.ts
index b54bffbd772..46fe1a4e6f2 100644
--- a/components/popconfirm/nz-popconfirm.module.ts
+++ b/components/popconfirm/nz-popconfirm.module.ts
@@ -13,7 +13,14 @@ import { NzPopconfirmDirective } from './nz-popconfirm.directive';
@NgModule({
declarations : [ NzPopconfirmComponent, NzPopconfirmDirective ],
exports : [ NzPopconfirmComponent, NzPopconfirmDirective ],
- imports : [ CommonModule, NzButtonModule, OverlayModule, NzI18nModule, NzIconModule, NzAddOnModule ],
+ imports : [
+ CommonModule,
+ NzButtonModule,
+ OverlayModule,
+ NzI18nModule,
+ NzIconModule,
+ NzAddOnModule
+ ],
entryComponents: [ NzPopconfirmComponent ]
})
diff --git a/components/popconfirm/nz-popconfirm.spec.ts b/components/popconfirm/nz-popconfirm.spec.ts
index 1d13d742b63..c7bdd44e834 100644
--- a/components/popconfirm/nz-popconfirm.spec.ts
+++ b/components/popconfirm/nz-popconfirm.spec.ts
@@ -245,18 +245,50 @@ describe('NzPopconfirm', () => {
const triggerElement = component.inBtnGroup.nativeElement;
expect(triggerElement.nextSibling.tagName).toBe('BUTTON');
}));
+ it('should support custom icon', fakeAsync(() => {
+ component.icon = 'question-circle';
+ const triggerElement = component.iconTemplate.nativeElement;
+ dispatchMouseEvent(triggerElement, 'click');
+ fixture.detectChanges();
+ tick(500);
+ fixture.detectChanges();
+ expect(overlayContainerElement.querySelector('.anticon-exclamation-circle')).toBeFalsy();
+ expect(overlayContainerElement.querySelector('.anticon-question-circle')).toBeTruthy();
+ }));
});
});
@Component({
selector: 'nz-popconfirm-test-new',
template: `
- Delete
- Delete
+
+ Delete
+
+
+ Delete
+
+
+ Delete
+
title-template
-
+
`
@@ -265,17 +297,19 @@ export class NzpopconfirmTestNewComponent {
confirm = jasmine.createSpy('confirm');
cancel = jasmine.createSpy('cancel');
condition = false;
+ icon: string = undefined;
@ViewChild('stringTemplate') stringTemplate: ElementRef;
@ViewChild('templateTemplate') templateTemplate: ElementRef;
@ViewChild('inBtnGroup') inBtnGroup: ElementRef;
-
+ @ViewChild('iconTemplate') iconTemplate: ElementRef;
}
@Component({
selector: 'nz-popconfirm-test-wrapper',
template: `
- Show
+ Show
+
@@ -291,7 +325,8 @@ export class NzpopconfirmTestNewComponent {
Show
-
+
Show
`