feat(lib): close the fab menu when item is selected

angular-material-extensions · Feb 7, 2020 · a8482f8 · a8482f8
1 parent 2220504
commit a8482f8
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.component.html b/projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.component.html
@@ -12,7 +12,7 @@
   </div>
   <div *ngIf="isActive" [@fabsStagger]="fabButtons.length"
        [fxLayout]="layout2" fxLayoutAlign="center center" fxLayoutGap="16px">
-    <button (click)="onFabMenuItemSelected.emit(fab.id)"
+    <button (click)="selectFabMenu(fab); onFabMenuItemSelected.emit(fab.id)"
             *ngFor="let fab of fabButtons"
             [color]="fab?.color"
             [matTooltip]="fab?.tooltip"

diff --git a/projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.component.ts b/projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.component.ts
@@ -40,6 +40,9 @@ export class MatFabMenuComponent implements OnInit, OnChanges {
   @Input()
   disabled: boolean;
 
+  @Input()
+  closeAfterSelection = true;
+
   // tslint:disable-next-line:no-output-on-prefix
   @Output()
   onFabMenuItemSelected: EventEmitter<string | number> = new EventEmitter<string | number>();
@@ -96,4 +99,11 @@ export class MatFabMenuComponent implements OnInit, OnChanges {
   toggle() {
     this.isActive = !this.isActive;
   }
+
+  selectFabMenu(fab: MatFabMenu) {
+    this.onFabMenuItemSelected.emit(fab.id);
+    if (this.closeAfterSelection) {
+      this.isActive = false;
+    }
+  }
 }