0

I am using a function inside HTML template, I cannot use a variable directly because the condition is little complex.

My Problem is that the function in the template is called multiple times.

For Example this Stackblitz (Minimal, Reproducible Example)

Logs get Name was called 4 times on load and 2 more times after clicking Change Version button.

I would like to call this once on load and only one per click. How can I achieve that for performance's sake

dota2pro
  • 7,220
  • 7
  • 44
  • 79

1 Answers1

3

Set the changeDetection mode of the component to OnPush

https://angular.io/api/core/ChangeDetectionStrategy

Using OnPush will tell Angular to only render the template when the @Input() bindings for the component has changed. The default mode will perform change detection for the template on each digest cycle, and since the expression is using a function it has to call it every time to see if the value has changed.

@Component({
  selector: 'hello',
  template: `<h1>Hello {{getName()}}!</h1>
  <button (click)="changeName()"> this</button>`,
  styles: [`h1 { font-family: Lato; }`],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HelloComponent implements OnInit{
   // ....
}

Here's a blog on the topic:

https://netbasal.com/a-comprehensive-guide-to-angular-onpush-change-detection-strategy-5bac493074a4

Reactgular
  • 52,335
  • 19
  • 158
  • 208
  • I wonder what's the use case of default `ChangeDetectionStrategy` – dota2pro Aug 27 '19 at 17:05
  • 1
    @dota2pro backward compatibility for older Angular 2 projects. That's my assumption of why it's still the default. The default was added so that Angular 2 projects would perform change detection in a way similar to Angular 1. A bad decision if you ask me. It should be completely removed from the framework. – Reactgular Aug 27 '19 at 17:08