Func call in prop binding

💻 Tech

Using a function call in a component property binding can lead to performance issues because each time the change detection is triggered (e.g., when an input values changes). The example component below simulates change detection with setInterval. For each interval of 1s, isUpdated() gets called each time. Logs will be continuously appear as a result.

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a target="_blank" href="https://angular.dev/overview">
      Learn more about Angular
    </a>

    <div>
      <h3>Direct method binding:</h3>
      <p [attr.data-updated]="isUpdated()">Updated Status (using method)</p>
      <p> {{ this.count % 2}} </p>
    </div>
  `,
})
export class App {
  name = 'Angular';

  count = 0;

  isUpdated(): boolean {
    console.log('isUpdated() called');
    return this.count % 2 === 0;
  }

  // Simulate a change in the component to trigger change detection
  constructor() {
    setInterval(() => {
      this.count++;
    }, 1000);
  }
}

bootstrapApplication(App);