fix: menu dropdown should not be shown if no items in the list (#967)

* fix: menu dropdown should not be shown if no items in the list

Author: arjunlalb

projects/components/src/menu-dropdown/menu-dropdown.component.test.ts

@@ -26,9 +26,7 @@ describe('Menu dropdown Component', () => {
 
   test('should display trigger content as expected', () => {
     spectator = createHost(
-      `
-    <ht-menu-dropdown label="Settings" icon="${IconType.MoreHorizontal}">
-        </ht-menu-dropdown>`
+      `<ht-menu-dropdown label="Settings" icon="${IconType.MoreHorizontal}"><ht-menu-item label="Option 1"></ht-menu-item></ht-menu-dropdown>`
     );
 
     expect(spectator.query('.trigger-content')).toExist();
@@ -78,4 +76,10 @@ describe('Menu dropdown Component', () => {
 
     expect(onClickSpy).not.toHaveBeenCalled();
   });
+
+  test('should not show the dropdown if no items to show.', () => {
+    spectator = createHost(`<ht-menu-dropdown label="Settings" icon="${IconType.MoreHorizontal}"></ht-menu-dropdown>`);
+
+    expect(spectator.query('ht-popover-trigger')).not.toExist();
+  });
 });

projects/components/src/menu-dropdown/menu-dropdown.component.ts

@@ -9,7 +9,7 @@ import { MenuItemComponent } from './menu-item/menu-item.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <ht-event-blocker event="click" [enabled]="true">
-      <ht-popover [closeOnClick]="true" [disabled]="this.disabled">
+      <ht-popover [closeOnClick]="true" [disabled]="this.disabled" *ngIf="this.items?.length > 0">
         <ht-popover-trigger>
           <div class="trigger-content" [ngClass]="{ disabled: this.disabled, labeled: !!this.label }">
             <ht-label *ngIf="this.label" class="trigger-label" [label]="this.label"> </ht-label>