functions-in-templates-explained.component.ts

@Component({
  template: `
    <!-- absolutely fine, signal getter just returns a value -->
    <p>{{ count() }}</p>
    <!-- also fine, the computation itself is irrelevant, 
         as it will only be performed when tracked signals change, not
         every time the computed signal is read  -->
    <p>{{ doubleCount() }}</p>
    <!-- fairly okayish, as the computation is very simple
         however, prefer using computed signals for such cases
         for consistency and enhanced reactivity -->
    <p>{{ countSquared() }}</p>
    <!-- pretty bad, the compuation in question is quite complex
         and depending on the size of the array can take quite
         long, will be re-executed a lot unnecessarily, prefer
         a computed signal  -->
    <p>{{ oneItem().title }}</p>
    <!-- fairly complex, in case of very complex
         forms can theoretically impact performance
         however I have not encountered such cases
         and lots of developers use this without questions  -->
    <p>{{ form.get('nested.control').value }}</p>
  `,
})
export class SkolComponent {
  count = signal(0);
  form = new FormGroup({
    nested: new FormGroup({
      control: new FormControl(),
    })
  });
  items = [
    // fairly large collection of items
  ]; 

  doubleCount = computed(() => this.count() * 2);

  countSquared() {
    return this.count() * this.count();
  }

  oneItem() {
    // use `count` as index to retrieve one item from array
    return this.items.find(item => item.id === this.count()); 
  }
}