fix(popover): don't show header if title is empty

by removing the element from the DOM

Closes #2653

Closes #2661

src/popover/popover.spec.ts

@@ -223,6 +223,16 @@ describe('ngb-popover', () => {
       expect(spyService.called).toBeTruthy();
     });
 
+    it('should not show a header if title is empty', () => {
+      const fixture = createTestComponent(`<div ngbPopover="Great tip!"></div>`);
+      const directive = fixture.debugElement.query(By.directive(NgbPopover));
+
+      directive.triggerEventHandler('click', {});
+      fixture.detectChanges();
+      const windowEl = getWindow(fixture.nativeElement);
+      expect(windowEl.querySelector('.popover-header')).toBeNull();
+    });
+
     it('should not open a popover if content and title are empty', () => {
       const fixture = createTestComponent(`<div [ngbPopover]="" [popoverTitle]=""></div>`);
       const directive = fixture.debugElement.query(By.directive(NgbPopover));

src/popover/popover.ts

@@ -43,7 +43,7 @@ let nextId = 0;
   },
   template: `
     <div class="arrow"></div>
-    <h3 class="popover-header">
+    <h3 class="popover-header" *ngIf="title != null">
       <ng-template #simpleTitle>{{title}}</ng-template>
       <ng-template [ngTemplateOutlet]="isTitleTemplate() ? title : simpleTitle" [ngTemplateOutletContext]="context"></ng-template>
     </h3>
@@ -80,7 +80,7 @@ let nextId = 0;
 })
 export class NgbPopoverWindow {
   @Input() placement: Placement = 'top';
-  @Input() title: string | TemplateRef<any>;
+  @Input() title: undefined | string | TemplateRef<any>;
   @Input() id: string;
   @Input() popoverClass: string;
   @Input() context: any;