【Angular】クリックイベント(click)の実装方法を解説

2023年5月2日2026年8月11日

当ページのリンクには広告が含まれています。

Angularでクリックイベントを実装するにはどうすればいいんだろう….

この記事では上記の悩みを解決します。

Angularでリンクやボタンをクリックした時などに特定のアクションを走らせたいことってありますよね。

Angularではclickアクションがあるので、その解説を本記事ではしていきます。

Contents

Angularでclickイベントを実装する方法-リンク

Angularでclickイベントを行うには、以下のように(click)=”関数”のように記載します。

まずはリンクをクリックした時のclickアクションです。

<a (click)="openPcWindow()">保存方法はこちら</a>

  /**
   * 保存するタブを開く
   */
  public openPcWindow() {
    const url = 'https://×××';

    window.open(url);
  }

上記のコードでは、リンクをクリックすると別タブで指定のURLが開くようになっています。

ボタンのclickイベントの実装例です。

  <button mat-icon-button class="info-icon" (click)="goInfo()">
    <mat-icon>info</mat-icon>
  </button>

  goInfo() {
    this.router.navigate(['info']);
  }

上記のコードでは、ボタンをクリックすると、/infoの画面に遷移するようになっています。

clickイベントを走らせるときに、引数を渡すこともできます。

  <button
    mat-raised-button color="warn"
    class="pick-button"
    (click)="storeData(item, item.id)"
  >
  Pickする</button>

  public storeData(item: Item, id: number) {
    // 引数で渡されたitemやidをこの関数でも使える
  }

javascriptでイベント発生時にさまざまなイベントオブジェクトがあるように、以下のようにclickアクションに$eventを引数で渡すことでAngularでもイベント情報を渡すことができます。

<a (click)="openPcWindow($event)">保存方法はこちら</a>

  public openPcWindow(event: any) {
    console.log(event);
  }

このイベント情報をデバッグしてみると、ずらっとイベント情報が取得できるかと思います。

エンジニアの基礎力を上げるおすすめ本を紹介！