Angular — Performance issue caused by function calls in template

Template is the foundation of Angular. Every component in Angular has a template which defines the elements, binding, etc. One of the most frequently used features in Angular template is function call.

@Component({
  selector: 'app-demo',
  template: `
    <div *ngFor="let v of findOddValues()">{{ v }}</div>
  `
})
export class DemoComponent {
  value = [1, 2, 3, 4, 5, 6, 7];

  findOddValues(): number[] {
    return this.value.filter(v => v % 2 !== 0);
  }
}