Tooltip Continously calling the method in angular6

Question

In column i am using tootip for the status is down. but the the tooltip continously looping the method and not displaying matTooltip="{{getdownReason(row.id,row.ip,row.status)}}"

 <ng-container matColumnDef="state">
            <mat-header-cell *matHeaderCellDef mat-sort-header disableClear class="statusColumn"> Status</mat-header-cell>
            <mat-cell  *matCellDef="let row" class="statusColumn"  matTooltip-append-to-body="true"  >&nbsp;
               <span  *ngIf="row.status === 'available'.toUpperCase(); else statusInfo"><i class="icon-circle colorCircle Green"   ></i></span>
              <ng-template #statusInfo><span *ngIf="row.status === 'reserved'.toUpperCase(); else statusWarning"><i class="icon-circle colorCircle Blue"></i></span></ng-template>
              <ng-template #statusWarning><span *ngIf="row.status === 'supervising'.toUpperCase(); else statusDanger"><i class="icon-circle colorCircle Orange"></i></span></ng-template>
              <ng-template  #statusDanger><span *ngIf="row.status === 'down'.toUpperCase(); else statusElse;"  ><i class="icon-circle colorCircle Red" matTooltip="{{getdownReason(row.id,row.ip,row.status)}}"  ></i></span></ng-template>
              <ng-template #statusElse><span style="position: center"><i class="icon-circle colorCircle" style="color: #7f7f86"></i></span></ng-template>
            </mat-cell>
          </ng-container>
    ```
    Anyone help me on this


  [1]: https://i.stack.imgur.com/pFF6x.png

Expected Result: when mouse over on icon Tooltip will call get request api and show the message

Answer 1

functions in a template will be called every time change detection runs which for a typical angular app is every few milliseconds.

The better option here would be to use a pipe. Pipes are only executed when their inputs change unlike a function.

@Pipe({
    name: 'downReason', pure: true
})
export class GetdownReasonPipe implements PipeTransform {

    public transform({id, ip, status}): string {

        const tooltip: string = "";  //fill in as needed
        
        return tooltip;
    }
}

Then, use that pipe like so

matTooltip="{{ row | downReason}}"

The pipe needs to be included in your module as well.