diff --git a/projects/angular/src/button/button-group/button-group.ts b/projects/angular/src/button/button-group/button-group.ts
index 50a3f96e77..e68623454f 100644
--- a/projects/angular/src/button/button-group/button-group.ts
+++ b/projects/angular/src/button/button-group/button-group.ts
@@ -161,15 +161,13 @@ export class ClrButtonGroup implements AfterContentInit, AfterViewInit {
   }
 
   private handleFocusOnMenuOpen() {
-    if (this.menuButtons.length) {
-      this.toggleService.popoverVisible.pipe(takeUntil(this.destroy$)).subscribe(visible => {
-        if (visible) {
-          this.focusHandler.initialize({
-            menu: this.menu.nativeElement,
-            menuToggle: this.menuToggle.nativeElement,
-          });
-        }
-      });
-    }
+    this.toggleService.popoverVisible.pipe(takeUntil(this.destroy$)).subscribe(visible => {
+      if (visible) {
+        this.focusHandler.initialize({
+          menu: this.menu.nativeElement,
+          menuToggle: this.menuToggle.nativeElement,
+        });
+      }
+    });
   }
 }
diff --git a/projects/demo/src/app/button-group/angular/basic-structure/basic-button-group.html b/projects/demo/src/app/button-group/angular/basic-structure/basic-button-group.html
index fea7448fcd..1370fcc72e 100644
--- a/projects/demo/src/app/button-group/angular/basic-structure/basic-button-group.html
+++ b/projects/demo/src/app/button-group/angular/basic-structure/basic-button-group.html
@@ -32,6 +32,7 @@ <h4>Basic Structure</h4>
 </label>
 
 <div class="clr-example">
+  Menu buttons populated synchronously:
   <clr-button-group class="btn-primary" [clrMenuPosition]="position">
     <clr-button (click)="handleClick(1)">1</clr-button>
     <clr-button (click)="handleClick(2)">2</clr-button>
@@ -43,6 +44,19 @@ <h4>Basic Structure</h4>
   </clr-button-group>
 </div>
 
+<div class="clr-example">
+  Menu buttons populated asynchronously:
+  <clr-button-group class="btn-primary" [clrMenuPosition]="position">
+    <clr-button (click)="handleClick(1)">1</clr-button>
+    <clr-button (click)="handleClick(2)">2</clr-button>
+    <clr-button (click)="handleClick(3)">3</clr-button>
+    <clr-button (click)="handleClick(4)">4</clr-button>
+    <clr-button *ngFor="let button of asyncMenuButtons | async" [clrInMenu]="true" (click)="handleClick(button)">
+      {{button}}
+    </clr-button>
+  </clr-button-group>
+</div>
+
 <div class="clr-example">
   <clr-button-group class="btn-icon">
     <clr-button>
diff --git a/projects/demo/src/app/button-group/angular/basic-structure/basic-button-group.ts b/projects/demo/src/app/button-group/angular/basic-structure/basic-button-group.ts
index c92a7a94d7..1e349419f2 100644
--- a/projects/demo/src/app/button-group/angular/basic-structure/basic-button-group.ts
+++ b/projects/demo/src/app/button-group/angular/basic-structure/basic-button-group.ts
@@ -5,6 +5,8 @@
  */
 
 import { Component } from '@angular/core';
+import { of } from 'rxjs';
+import { delay } from 'rxjs/operators';
 
 @Component({
   selector: 'clr-basic-button-group-demo',
@@ -14,6 +16,8 @@ import { Component } from '@angular/core';
 export class BasicButtonGroupDemo {
   position = 'bottom-left';
 
+  readonly asyncMenuButtons = of([5, 6, 7]).pipe(delay(100));
+
   handleClick(id: number): void {
     console.log(`Button ${id} clicked!`);
   }