import { Component, OnInit, Input, Output, EventEmitter, ViewChild, OnDestroy, ElementRef, Renderer2 } from '@angular/core'; import { MatMenuPanel, MatMenuTrigger, MatButton } from '@angular/material'; import { Subscription } from 'rxjs'; import { NGXLogger } from 'ngx-logger'; @Component({ selector: 'ucap-split-button', templateUrl: './split-button.component.html', styleUrls: ['./split-button.component.scss'] }) export class SplitButtonComponent implements OnInit, OnDestroy { @Input() menu: MatMenuPanel; @Input() disabled: boolean; @Output() buttonClick = new EventEmitter(); @Output() splitClick = new EventEmitter(); @ViewChild('matMenuTrigger', { static: true }) private matMenuTrigger: MatMenuTrigger; // tslint:disable-next-line: variable-name private _handleClick: (event: MouseEvent) => void; private menuCloseSubscription: Subscription; splitOpened = false; constructor( private elementRef: ElementRef, private logger: NGXLogger ) {} ngOnInit() { this.menuCloseSubscription = this.menu.close.subscribe(() => { this.matMenuTrigger._handleClick = e => {}; this.splitOpened = false; }); this._handleClick = this.matMenuTrigger._handleClick; this.matMenuTrigger._handleClick = e => {}; } ngOnDestroy(): void { if (!!this.menuCloseSubscription) { this.menuCloseSubscription.unsubscribe(); } } onClick(event: MouseEvent) { this.buttonClick.emit(event); } onClickSplit(event: MouseEvent) { this.matMenuTrigger._handleClick = this._handleClick; this.splitOpened = true; this.splitClick.emit(event); } }