Apply styles to menu open

Author: youda97

src/dialog/overflow-menu/overflow-menu.component.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, ElementRef } from "@angular/core";
 
 /**
  * The OverFlow menu component encapsulates the OverFlowMenu directive, and the menu iconography into one convienent component
@@ -18,6 +18,7 @@ import { Component } from "@angular/core";
 		<div
 			[ibmOverflowMenu]="options"
 			[appendToBody]="true"
+			[ngClass]="{'bx--overflow-menu--open': open === true}"
 			attr.aria-label="{{'OVERFLOW_MENU.OVERFLOW' | translate}}"
 			class="bx--overflow-menu"
 			role="button"
@@ -35,6 +36,20 @@ import { Component } from "@angular/core";
 		<ng-template #options>
 			<ng-content></ng-content>
 		</ng-template>
-	`
+	`,
+	styles: [`
+		.bx--overflow-menu--open {
+				opacity: 1
+		}
+	`]
 })
-export class OverflowMenu {}
+export class OverflowMenu {
+	constructor(private elementRef: ElementRef) {}
+
+	get open() {
+		if (this.elementRef.nativeElement.children[0].getAttribute("aria-expanded") === "true") {
+			return true;
+		}
+		return false;
+	}
+}

src/dialog/overflow-menu/overflow-menu.directive.ts

@@ -51,25 +51,6 @@ export class OverflowMenuDirective extends DialogDirective {
 
 	onDialogInit() {
 		this.dialogConfig.content = this.ibmOverflowMenu;
-		this.dialogService.isClosed.subscribe(() => this.updateOpacity());
-	}
-
-	open() {
-		super.open();
-		this.updateOpacity();
-	}
-
-	toggle() {
-		super.toggle();
-		this.updateOpacity();
-	}
-
-	updateOpacity() {
-		if (this.elementRef.nativeElement.getAttribute("aria-expanded") === "true") {
-			this.elementRef.nativeElement.style.opacity = 1;
-		} else {
-			this.elementRef.nativeElement.style.opacity = null;
-		}
 	}
 
 	@HostListener("keydown", ["$event"])