Feat: added onMenuToggled event emitter, closes #35

projects/angular-material-extensions/fab-menu/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@angular-material-extensions/fab-menu",
   "description": "Angular Material component that allow users to select a county or nationality ",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "homepage": "https://angular-material-extensions.github.io/fab-menu",
   "author": {
     "name": "anthonynahas",

projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.component.html

@@ -1,6 +1,6 @@
 <div [fxLayout]="layout" class="container" fxLayoutAlign="center center" fxLayoutGap="16px">
   <div fxLayoutAlign="center">
-    <button (click)="isActive = !isActive"
+    <button (click)="toggle()"
             [color]="color" [disabled]="disabled"
             type="button"
             [ngClass]="{

projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.component.ts

@@ -47,6 +47,10 @@ export class MatFabMenuComponent implements OnInit, OnChanges {
   @Output()
   onFabMenuItemSelected: EventEmitter<string | number> = new EventEmitter<string | number>();
 
+  // tslint:disable-next-line:no-output-on-prefix
+  @Output()
+  onFabMenuToggled: EventEmitter<boolean> = new EventEmitter<boolean>();
+
   layout: any;
   layout2: any;
 
@@ -98,12 +102,14 @@ export class MatFabMenuComponent implements OnInit, OnChanges {
 
   toggle() {
     this.isActive = !this.isActive;
+    this.onFabMenuToggled.emit(this.isActive);
   }
 
   selectFabMenu(fab: MatFabMenu) {
     this.onFabMenuItemSelected.emit(fab.id);
     if (this.closeAfterSelection) {
       this.isActive = false;
+      this.onFabMenuToggled.emit(false);
     }
   }
 }

src/app/app.component.html

@@ -497,7 +497,14 @@ <h2>Usage</h2>
   </mat-card>
 
   <!--    <mat-fab-menu color="primary" [fabButtons]="fabButtons" direction="top"></mat-fab-menu>-->
-  <mat-fab-menu class="fix-bottom-right" color="primary" [fabButtons]="fabCountries" direction="top"></mat-fab-menu>
+  <mat-fab-menu class="fix-bottom-right" 
+                [icon]="icon"
+                color="primary" 
+                [fabButtons]="fabCountries" 
+                direction="top"
+                (onFabMenuToggled)="onFabMenuToggled($event)"
+                (onFabMenuItemSelected)="onFabMenuItemSelected($event)">
+  </mat-fab-menu>
 
 
     <markdown src="assets/md/html.md"></markdown>

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {MatFabMenu, MatFabMenuDirection} from '@angular-material-extensions/fab-menu';
+import {MatFabMenu, MatFabMenuDirection} from '../../projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.component';
 import { ThemePalette } from '@angular/material/core';
 
 @Component({
@@ -16,6 +16,7 @@ export class AppComponent implements OnInit {
   exampleIndex = 1;
   exampleFabButtons: MatFabMenu[];
   layout = 'end end';
+  icon: string = 'menu';
 
   fabButtonsRandom: MatFabMenu[] = [
     {
@@ -119,6 +120,20 @@ export class AppComponent implements OnInit {
     }
   }
 
+  onFabMenuToggled(open: boolean) {
+    console.log('on menu toggled', open);
+
+    if (open) {
+      this.icon = "add";
+    } else {
+      this.icon = "menu";
+    }
+  }
+
+  onFabMenuItemSelected(item: any) {
+    console.log('on menu item selected', item);
+  }
+
   onExampleChanged($event: number) {
     console.log('on example changed', $event);
     switch ($event) {

src/app/app.module.ts

@@ -7,7 +7,7 @@ import {Angulartics2Module} from 'angulartics2';
 import {MarkdownModule} from 'ngx-markdown';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {HttpClientModule} from '@angular/common/http';
-import {MatFabMenuModule} from '@angular-material-extensions/fab-menu';
+import {MatFabMenuModule} from '../../projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.module';
 import {FormsModule} from '@angular/forms';
 import {MatRadioModule} from '@angular/material/radio';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';