fix(module:tooltip,popconfirm,popover): not create element when use d…

…irective (#1968)

close #1967

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',

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', () => {
     <a nz-popconfirm #stringTemplate nzTitle="title-string" nzOkText="ok-text" nzCancelText="cancel-text" nzOkType="default" [nzCondition]="condition" (nzOnConfirm)="confirm()" (nzOnCancel)="cancel()">Delete</a>
     <a nz-popconfirm #templateTemplate [nzTitle]="titleTemplate" (nzOnConfirm)="confirm()" (nzOnCancel)="cancel()">Delete</a>
     <ng-template #titleTemplate>title-template</ng-template>
+    <div>
+      <button>A</button>
+      <button #inBtnGroup nz-popconfirm nzTitle="title-string" >B</button>
+      <button>C</button>
+    </div>
   `
 })
 export class NzpopconfirmTestNewComponent {
@@ -256,6 +266,7 @@ export class NzpopconfirmTestNewComponent {
   condition = false;
   @ViewChild('stringTemplate') stringTemplate: ElementRef;
   @ViewChild('templateTemplate') templateTemplate: ElementRef;
+  @ViewChild('inBtnGroup') inBtnGroup: ElementRef;
 
 }
 

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,13 +191,19 @@ describe('NzPopover', () => {
     <ng-template #templateContent>
       content-template
     </ng-template>
+    <div>
+      <button>A</button>
+      <button #inBtnGroup nz-popover nzTitle="title-string" >B</button>
+      <button>C</button>
+    </div>
   `
 })
 export class NzPopoverTestNewComponent {
   @ViewChild('stringPopover') stringPopover: ElementRef;
   @ViewChild('stringPopover', { read: NzPopoverDirective }) stringPopoverNzPopoverDirective: NzPopoverDirective;
   @ViewChild('templatePopover') templatePopover: ElementRef;
   @ViewChild('templatePopover', { read: NzPopoverDirective }) templatePopoverNzPopoverDirective: NzPopoverDirective;
+  @ViewChild('inBtnGroup') inBtnGroup: ElementRef;
 }
 
 @Component({

components/tooltip/nz-tooltip.directive.ts

@@ -186,7 +186,10 @@ export class NzTooltipDirective implements AfterViewInit, OnInit, OnDestroy {
   ngOnInit(): void {
     // Support faster tooltip mode: <a nz-tooltip="xxx"></a>. [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 ]));

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,13 +247,20 @@ describe('NzTooltip', () => {
     <ng-template #template>
       title-template
     </ng-template>
+    <div>
+      <button>A</button>
+      <button #inBtnGroup nz-tooltip nzTitle="title-string" >B</button>
+      <button>C</button>
+    </div>
   `
 })
 export class NzTooltipTestNewComponent {
   @ViewChild('titleString') titleString: ElementRef;
   @ViewChild('titleString', { read: NzTooltipDirective }) titleStringNzTooltipDirective: NzTooltipDirective;
   @ViewChild('titleTemplate') titleTemplate: ElementRef;
   @ViewChild('titleTemplate', { read: NzTooltipDirective }) titleTemplateNzTooltipDirective: NzTooltipDirective;
+  @ViewChild('inBtnGroup') inBtnGroup: ElementRef;
+
 }
 
 @Component({