Angular 5: clicked button that triggers a dialog becomes highlighted after the dialog is closed
- Add to your button in HTML some id. In my case it's #changeButton:
<button #changeButton mat-icon-button (click)="changeItem(element)" disableRipple>
<mat-icon>edit</mat-icon>
</button>
- Import ViewChild and ElementRef in the .ts file:
{ ViewChild, ElementRef } from '@angular/core';
- Declare a new variable in the .ts file:
@ViewChild('changeButton') private changeButton: ElementRef;
- Subscribe to your dialog's afterClose() event and remove the cdk-program-focused css class:
dialogRef.afterClosed().subscribe(result => {
this.changeButton['_elementRef'].nativeElement
.classList.remove('cdk-program-focused');
}
In my case, the real problem stay in button structure, 'material' build various sub components and last one is a 'div' with css class 'mat-button-focus-overlay':
My solution is simply, in 'style.css' file, add or sobrescribe the 'mat-button-focus-overlay'
.mat-button-focus-overlay { background-color: transparent!important; }