副業におすすめなサイトを見る→

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

clickイベント

アプリリリースのお知らせ

予定を探すアプリyoteipickerをリリースしました。

アプリの利用用途:暇だから何か予定入れたいけど今週の土日は何しようかな〜?ってときに使えるアプリです。

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

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

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

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

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

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

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

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

Contents

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);
  }

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

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

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

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

スキルを売り買いするならココナラ

コメント

コメントする

CAPTCHA


Contents
閉じる