[Angular] テンプレート側でメソッドを呼び出す方法とパフォーマンスについて

実践

テンプレート側で、コンポーネントのメソッドを呼び出していきます。
まずは、以下のようにaddメソッドをコンポーネントで作成します。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {

  add(a:number, b:number){
    return a + b;
  }
}

以下はテンプレートです。
“{{}}”で囲んで、コンポーネントのメソッドを呼び出せます。

<p>{{add(1, 3)}}</p>

パフォーマンスについて

注意事項として、公式ドキュメントでテンプレートには複雑な処理をさせてはいけないと推奨されています。
理由は、ボタンクリックなどの変更検知によって、メソッドも再度呼び出されるため、そのメソッドが重いと何度も処理に時間がかかる恐れがあります。

対策としては、コストの高い部分の処理は最初行ってキャッシュし、テンプレートはそれを取得するといった形にするなどができそうです。