0

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?

pelvimet
  • 15
  • 5

1 Answers1

0

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

Steve
  • 582
  • 3
  • 6
  • I'll try that , thanks. What about [ngClass] on the div element? this will also trigger every time a click event is clicked – pelvimet Nov 22 '19 at 15:00
  • Maybe this answer https://stackoverflow.com/questions/56335963/ngclass-calls-method-multiple-times/56337564 will help. Or simply use [class] binding if possible without calling function in template – Steve Nov 22 '19 at 15:03