【Angular】イベントリスナーを作ろう!【サンプルあり】

ANGULAR

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています!

Angularの解説シリーズです。

今回はAngularのイベントリスナーについて学んでいきましょう!

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!

この記事を読むと・・・
  • イベントリスナーの作り方がわかる!
  • 主要なイベントリスナーがわかる

※PCにnpm、nodeがインストールされている前提で記述します。
 yarn等をお使いの方は読み替えてください。

環境がない人はcodesansboxを使ってね!

イベントリスナーの基本

イベントの受け取りかた

■ 構文

<タグ名 (イベント名)="処理"></タグ名>

このように記述することで、イベントを受け取る事ができます。

主なイベント

  • click・・・クリック
  • dbclick・・・ダブルクリック
  • mousedown・・・マウスボタン押下
  • mouseup・・・マウスボタンを離す
  • mouseenter・・・ホバー
  • mousemove・・・ホバー状態でマウスを動かす
  • mouseleave・・・ホバーアウト
  • focus・・・フォーカス
  • blur・・・フォーカスアウト
  • keydown・・・キーを押下
  • keypress・・・キーを押し続ける
  • keyup・・・キーを離す
  • input・・・入力内容を変更
  • select・・・テキスト選択
  • reset・・・リセット
  • submit・・・送信
これらがよく使うイベントだよ!

イベントリスナーをつくろう!

作りたいもの

今回つくりたいもの

  • クリックで現在時刻を表示するボタン
  • マウスホバー/アウトでメッセージを表示する要素

これが今回の完成形だよ!
他のファイルは左上のハンバーガーメニューをクリックして確認してね!

クリックイベントをつくろう

ボタン用コンポーネントを作ろう

コンポーネントの作成

ng generate component btn-event

btn-event.component.ts

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

@Component({
  selector: 'app-btn-event',
  templateUrl: './btn-event.component.html',
  styleUrls: ['./btn-event.component.css'],
})
export class BtnEventComponent implements OnInit {
  // 時刻表示用
  myClock = '';

  constructor() {}

  ngOnInit(): void {}

  getTime(): void {
    // 現在時刻を取得し、myClockに代入する
    this.myClock = new Date().toLocaleString();
    console.log('クリックされました!');
  }
}
ここでは、クリックされた際に呼び出される関数を設定したよ!

btn-event.component.html

<div class="">
  <!-- クリックされると、getTime関数を呼び出す -->
  <button (click)="getTime()">現在時刻</button>
  <span>{{ myClock }} </span>
</div>
ボタンにクリックイベントを受け取る設定をしたよ!

app.component.html

<!-- mouse-eventコンポーネントの埋め込み -->
<app-btn-event></app-btn-event>

実際の動作は完成形を見てね!

マウスイベント用コンポーネントを作ろう

コンポーネントの作成

ng generate component mouse-event

mouse-event.component.ts

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

@Component({
  selector: 'app-mouse-event',
  templateUrl: './mouse-event.component.html',
  styleUrls: ['./mouse-event.component.css'],
})
export class MouseEventComponent implements OnInit {
  // メッセージ
  message = '';

  constructor() {}

  ngOnInit(): void {}

  // ホバー時の処理
  myHover(): void {
    this.message = 'ホバーされました';
  }

  // マウスアウト時の処理
  myLeave(): void {
    this.message = 'マウスが離れました';
  }
}
ホバー/マウスアウトされた際に呼び出される関数を設定したよ!

mouse-event.component.html

<div>
  <span class="hover-area" (mouseenter)="myHover()" (mouseleave)="myLeave()">
    ここをホバーして!
  </span>
  <span>{{ message }}</span>
</div>
要素にマウスイベントを受け取る設定をしたよ!

app.component.html

<!-- mouse-eventコンポーネントの埋め込み -->
<app-mouse-event></app-mouse-event>
■ ホバー

■ マウスアウト

これでマウスイベントを受け取ると
メッセージを表示するHTML要素が完成しました。

実際の動作は完成形を見てね!

まとめ

  • イベントリスナーの受け取り方
    <タグ名 (イベント名)=”処理”>

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

タイトルとURLをコピーしました