【Angular】Service のメソッドを Template(html) から直接呼ぶ

問題

Angular でのアプリケーション開発では、Service を利用してロジックを分離することがあるかと思います。

Template から Service のメソッドを呼び出すには、普通は Component を経由するかと思います。

@Injectable() 
export class FooService {
  doSomething() { ... }
}

@Component()
class FooComponent {
  constructor(
    private service: FooService,
  ) {}

  doSomething() {
    // 単なる中継
    this.service.doSomething()
  }
}

<button (click)="doSomething()"></button>

ただし、Component のコードが冗長化してしまいます。

対応

Component の constructor にて、Service を public として inject します。

@Injectable() 
export class FooService {
  doSomething() { ... }
}

@Component()
class FooComponent {
  constructor(
    public service: FooService,
  ) {}
}

<button (click)="service.doSomething()"></button>

これで、Component に中継のためだけのメソッド定義をする必要がなくなりました。

参考

• angular - How to call service method from html file.? - Stack Overflow