Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 5: clicked button that triggers a dialog becomes highlighted after the dialog is closed

I noticed that button gets classes cdk-focused and cdk-program-focused added after the dialog it triggered is closed. If I click anywhere effect disappears.

app.component.html [fragment]

<mat-cell *matCellDef="let element">
  <span matTooltip="Delete" matTooltipPosition="right">
    <button mat-icon-button color="warn" (click)="openDeleteAssociationDialog()">
      <mat-icon>delete</mat-icon>
    </button>
  </span>
</mat-cell>

Illustration

like image 957
Paul Avatar asked Mar 16 '18 20:03

Paul


People also ask

How to add click event to a button in angular?

Let’s add changes in the Angular component. In Html template component- app.component.html: Added click event to a button with event binding syntax i.e bracket () symbol the event name is the name of the function placed inside the bracket. This function is called when the button is clicked.

How to unit test button click in angular?

This page will walk through Angular unit test example for button click. For click event we can use triggerEventHandler method of Angular DebugElement class. We can also call native JavaScript click method of button. On click of button, we call a component method and it is possible that our component method has other dependencies to execute.

How to test an event method in angular?

Find the method syntax from Angular doc. The first argument is the event name to trigger and the second argument is the event object passed to handler. Find the sample code. 3. Button Click Test for Property Binding For button click test we have created a component that have three button. We are creating three test scenarios. 1.

How to use fake asynchronous testing in angular?

The fakeAsync is the Angular testing API that wraps a test function in a fake asynchronous test zone. The tick () simulates the asynchronous passage of time. Find the button click test code to call a component method. Now we will test Edit button of our component. On click of Edit button, we are calling a function with arguments.


1 Answers

  1. 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>
  1. Import ViewChild and ElementRef in the .ts file:
{ ViewChild, ElementRef } from '@angular/core';
  1. Declare a new variable in the .ts file:
@ViewChild('changeButton') private changeButton: ElementRef;
  1. 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');
}
like image 155
yuzhou Avatar answered Sep 21 '22 18:09

yuzhou