Angular changedetection ngFor with primeng OverlayComponent

Question

I am making an Angular application and everything seems to work good. But I am questioning the performance.

So I tried to implement changedetectionStrategy.OnPush.

I used a tooltip and overlaypanel from primeng https://www.primefaces.org/primeng/#/overlaypanel

Every click in this list, triggers the getTooltip event. This is certainly not needed. The click event fires changedetection changes.

<div #actualTarget
     *ngFor="let event of day.TimeEvents"
     class="event"
     pTooltip="{{getTooltip(event)}}"
     tooltipPosition="bottom"
     showDelay="200"
     (click)="openOverlay(op, $event, actualTarget)">

I tried to run the click command outside with ngZone with a custom directive, but this does not show the overlayPanel as it does not trigger the changedetection https://medium.com/@krzysztof.grzybek89/how-runoutsideangular-might-reduce-change-detection-calls-in-your-app-6b4dab6e374d

Can it be easaly solved, so that the overlaypanel shows, but the tooltip method is not getting called for every div element again?

Answer 1

Your problem is not a change detection but a function call inside template. It will be called more than once pTooltip="{{getTooltip(event)}}" . Probably better to move the method to pipe pTooltip="{{event | getTooltip}}"

You can fin out more here