Unwanted event trigger on mouseover Angular HTML

Question

I have the below partial HTML in my Material Table Angular application.

//HTML

 <button mat-icon-button class="mat-18" (click)="updateStatus(element.id)" 
            [disabled]="validateToWork(element.reachedTime)">
            <mat-icon>edit</mat-icon>
         </button>

//Typescript

  validateToWork(reachedTime:any):boolean{

    if(reachedTime&& new Date(this.datePipe.transform(reachedTime, DATE_WITH_TIME)) < new Date())
      return true;
    else
      return false;
  }

The above code works fine and the edit button is disabled. But what i observed is when i have a console.log(reachedTime) in the typescript like,

console.log(reachedTime)
if(reachedTime&& new Date(this.datePipe.transform(reachedTime, DATE_WITH_TIME)) < new Date())

I could see the event is triggered on every mouseover i do on the table. Its weird for me and not sure. How can i stop that?

Below is the console log i have

Any help ?

Answer 1

Why

One of the rule with angular, is that you should try to avoid using method inside the html.

doing so

<button mat-icon-button class="mat-18" (click)="updateStatus(element.id)" 
  [disabled]="validateToWork(element.reachedTime)">
  <mat-icon>edit</mat-icon>
</button>

Will force [disabled] to be recalculated each time you make any interaction with the page, mouseover being one.

To test this out, just scroll or click somewhere, you should have the same result.

---

How to fix it

Add the logic inside a pipe

import { DatePipe } from '@angular/common'
import { Pipe, PipeTransform } from '@angular/core'
import { DATE_WITH_TIME } from 'from/some/where'

@Pipe({
  name: 'validateToWork',
})
export class ValidateToWorkPipe implements PipeTransform {
  constructor(private datePipe: DatePipe) {}

  transform(reachedTime: any): boolean {
    // <- do add a definition, try to never use any
    if (reachedTime && new Date(this.datePipe.transform(reachedTime, DATE_WITH_TIME)) < new Date())
      return true
    else return false
  }
}

And use it in your code like follow

<button mat-icon-button class="mat-18" (click)="updateStatus(element.id)" 
  [disabled]="element.reachedTime | validateToWork">
  <mat-icon>edit</mat-icon>
</button>

Further more

• Do not forget to declare it in your module under the declarations: [] or in the imports: [] if you did create a module for that specific pipe
• If you declares it directly, you won't be able to use it somewhere else.
• If this is an object, you will have to manually trigger the update