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

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

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

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

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

yoteiPickerというアプリで、clickイベントを実装しているので、リンクやボタンを押下した時にアクションが走ることが確認できます。

>>ココナラと似てるおすすめの副業サイトを確認する

あわせて読みたい

ココナラと似てるサイト比較11選！【2023年最新版】 この記事ではココナラに似てる副業サイトを11こ紹介しています。 今すぐスキルをお金にするなら、記事で気になったサービスに登録してみましょう。 本記事のゴール ココ…

>>リモートワークもあるおすすめの転職サイトを確認する

あわせて読みたい

転職におすすめなサイト11選【リモート・フリーランスも対象】 転職におすすめなサイトが知りたいなぁ… 転職エージェントによって相性があります！ この記事では、フリーランスの方でも利用できる転職におすすめなサイトを紹介しま…

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

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

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

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

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

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

    window.open(url);
  }

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

Angularでclickイベントを実装する方法-ボタン

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

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

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

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

Angularでclickイベントを実装する方法-引数を渡す

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をこの関数でも使える
  }

Angularのclickイベント-$eventの引数を渡す

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

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

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

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

>>ココナラと似てるおすすめの副業サイトを確認する

あわせて読みたい

ココナラと似てるサイト比較11選！【2023年最新版】 この記事ではココナラに似てる副業サイトを11こ紹介しています。 今すぐスキルをお金にするなら、記事で気になったサービスに登録してみましょう。 本記事のゴール ココ…

>>リモートワークもあるおすすめの転職サイトを確認する

あわせて読みたい

転職におすすめなサイト11選【リモート・フリーランスも対象】 転職におすすめなサイトが知りたいなぁ… 転職エージェントによって相性があります！ この記事では、フリーランスの方でも利用できる転職におすすめなサイトを紹介しま…

休日で空いた時間の暇つぶしを探せるアプリを公開しています。