Angular の onFocusEvent

この記事では、Angularfocus() に取り組み、その仕組みを例を挙げて説明します。

Angular で onFocusEvent() を使用する

Angular 10 のフォーカスイベントとは何か、そしてそれをどのように使用できるかを見ていきます。要素がフォーカスを取得すると、フォーカスイベントがトリガーされます。

# Angular

<input (focus)='functionName()'/>

フォーカスイベントで使用される NgModule は CommonModule です。

フォーカスイベントを使用した段階的な例を見てみましょう。

1. 使用できる Angular のあるアプリを作成します。
2. app.component.ts で、フォーカスイベントをトリガーする関数を作成します。
3. app.component.html で、入力要素を作成し、フォーカスイベントを設定します。
4. ngserve を使用して Angular アプリを提供し、出力を確認します。

コード-app.component.ts：

# Angular

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

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    onFocusEvent(): void {
        console.log('Focus Activated for this method');
    }
}

コード-app.component.html：

# Angular
<form>
    <input type="text" placeholder="Text" (focus) = 'onFocusEvent()'>
</form>

出力：

入力フィールドにフォーカスすると、コンソールの出力が表示されます。

ボタンをクリックすると、コンソールにこのメソッドのフォーカスがアクティブになりましたというメッセージが表示される別の例を見てみましょう。

コード-app.component.ts：

# Angular

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

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    onFocusEvent(): void {
        console.log('Focus Activated for this method');
    }
}

コード-app.component.html：

# Angular

<br>
<form>
    <button (focus) = 'onFocusEvent()'>Click Me!</button>
</form>

出力：