diff --git a/components/popconfirm/nz-popconfirm.directive.ts b/components/popconfirm/nz-popconfirm.directive.ts
index 5d8918b74f5..af897f088d0 100644
--- a/components/popconfirm/nz-popconfirm.directive.ts
+++ b/components/popconfirm/nz-popconfirm.directive.ts
@@ -86,7 +86,10 @@ export class NzPopconfirmDirective extends NzTooltipDirective implements OnInit,
ngOnInit(): void {
if (!this.tooltip) {
- this.tooltip = this.hostView.createComponent(this.factory).instance;
+ const tooltipComponent = this.hostView.createComponent(this.factory);
+ this.tooltip = tooltipComponent.instance;
+ // Remove element when use directive https://github.com/NG-ZORRO/ng-zorro-antd/issues/1967
+ this.renderer.removeChild(this.renderer.parentNode(this.elementRef.nativeElement), tooltipComponent.location.nativeElement);
this.isDynamicTooltip = true;
const properties = [
'nzTitle',
diff --git a/components/popconfirm/nz-popconfirm.spec.ts b/components/popconfirm/nz-popconfirm.spec.ts
index 3a7de1a86f9..fc0c0d82b9c 100644
--- a/components/popconfirm/nz-popconfirm.spec.ts
+++ b/components/popconfirm/nz-popconfirm.spec.ts
@@ -239,6 +239,11 @@ describe('NzPopconfirm', () => {
tick();
expect(overlayContainerElement.querySelector('.ant-popover-message-title')).toBeNull();
}));
+ it('should not create element', fakeAsync(() => {
+ fixture.detectChanges();
+ const triggerElement = component.inBtnGroup.nativeElement;
+ expect(triggerElement.nextSibling.tagName).toBe('BUTTON');
+ }));
});
});
@@ -248,6 +253,11 @@ describe('NzPopconfirm', () => {
Delete
Delete
title-template
+
+
+
+
+
`
})
export class NzpopconfirmTestNewComponent {
@@ -256,6 +266,7 @@ export class NzpopconfirmTestNewComponent {
condition = false;
@ViewChild('stringTemplate') stringTemplate: ElementRef;
@ViewChild('templateTemplate') templateTemplate: ElementRef;
+ @ViewChild('inBtnGroup') inBtnGroup: ElementRef;
}
diff --git a/components/popover/nz-popover.spec.ts b/components/popover/nz-popover.spec.ts
index 0a2134cc63c..1f49e1e8ec4 100644
--- a/components/popover/nz-popover.spec.ts
+++ b/components/popover/nz-popover.spec.ts
@@ -171,6 +171,12 @@ describe('NzPopover', () => {
expect(overlayContainerElement.querySelector('.ant-popover-title')).toBeNull();
expect(overlayContainerElement.querySelector('.ant-popover-inner-content')).toBeNull();
}));
+
+ it('should not create element', fakeAsync(() => {
+ fixture.detectChanges();
+ const triggerElement = component.inBtnGroup.nativeElement;
+ expect(triggerElement.nextSibling.tagName).toBe('BUTTON');
+ }));
});
});
@@ -185,6 +191,11 @@ describe('NzPopover', () => {
content-template
+
+
+
+
+
`
})
export class NzPopoverTestNewComponent {
@@ -192,6 +203,7 @@ export class NzPopoverTestNewComponent {
@ViewChild('stringPopover', { read: NzPopoverDirective }) stringPopoverNzPopoverDirective: NzPopoverDirective;
@ViewChild('templatePopover') templatePopover: ElementRef;
@ViewChild('templatePopover', { read: NzPopoverDirective }) templatePopoverNzPopoverDirective: NzPopoverDirective;
+ @ViewChild('inBtnGroup') inBtnGroup: ElementRef;
}
@Component({
diff --git a/components/tooltip/nz-tooltip.directive.ts b/components/tooltip/nz-tooltip.directive.ts
index 63220cfe506..31110ade915 100644
--- a/components/tooltip/nz-tooltip.directive.ts
+++ b/components/tooltip/nz-tooltip.directive.ts
@@ -186,7 +186,10 @@ export class NzTooltipDirective implements AfterViewInit, OnInit, OnDestroy {
ngOnInit(): void {
// Support faster tooltip mode: . [NOTE] Used only under NzTooltipDirective currently.
if (!this.tooltip) {
- this.tooltip = this.hostView.createComponent(this.factory).instance;
+ const tooltipComponent = this.hostView.createComponent(this.factory);
+ this.tooltip = tooltipComponent.instance;
+ // Remove element when use directive https://github.com/NG-ZORRO/ng-zorro-antd/issues/1967
+ this.renderer.removeChild(this.renderer.parentNode(this.elementRef.nativeElement), tooltipComponent.location.nativeElement);
this.isDynamicTooltip = true;
const properties = [ 'nzTitle', 'nzContent', 'nzOverlayClassName', 'nzOverlayStyle', 'nzMouseEnterDelay', 'nzMouseLeaveDelay', 'nzVisible', 'nzTrigger', 'nzPlacement' ];
properties.forEach(property => this.updateCompValue(property, this[ property ]));
diff --git a/components/tooltip/nz-tooltip.spec.ts b/components/tooltip/nz-tooltip.spec.ts
index 49d1c836705..a7dfe977226 100644
--- a/components/tooltip/nz-tooltip.spec.ts
+++ b/components/tooltip/nz-tooltip.spec.ts
@@ -193,6 +193,7 @@ describe('NzTooltip', () => {
tick(); // wait for next tick to hide
expect(overlayContainerElement.textContent).not.toContain(featureKey);
}));
+
it('should nzTitle support template', fakeAsync(() => {
const featureKey = 'title-template';
const triggerElement = component.titleTemplate.nativeElement;
@@ -227,6 +228,13 @@ describe('NzTooltip', () => {
tick(); // wait for next tick to hide
expect(overlayContainerElement.textContent).not.toContain(featureKey);
}));
+
+ it('should not create element', fakeAsync(() => {
+ fixture.detectChanges();
+ const triggerElement = component.inBtnGroup.nativeElement;
+ expect(triggerElement.nextSibling.tagName).toBe('BUTTON');
+ }));
+
});
});
@@ -239,6 +247,11 @@ describe('NzTooltip', () => {
title-template
+
+
+
+
+
`
})
export class NzTooltipTestNewComponent {
@@ -246,6 +259,8 @@ export class NzTooltipTestNewComponent {
@ViewChild('titleString', { read: NzTooltipDirective }) titleStringNzTooltipDirective: NzTooltipDirective;
@ViewChild('titleTemplate') titleTemplate: ElementRef;
@ViewChild('titleTemplate', { read: NzTooltipDirective }) titleTemplateNzTooltipDirective: NzTooltipDirective;
+ @ViewChild('inBtnGroup') inBtnGroup: ElementRef;
+
}
@Component({