Angular의 onFocusEvent

이 기사에서 우리는 Angular focus()를 다루고 어떻게 작동하는지 예를 들어 설명할 것입니다.

Angular에서 onFocusEvent() 사용

Angular 10의 focus 이벤트가 무엇이며 어떻게 사용할 수 있는지 알아보겠습니다. 요소가 포커스를 받으면 포커스 이벤트가 트리거됩니다.

# Angular

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

포커스 이벤트에서 사용하는 NgModule은 CommonModule입니다.

포커스 이벤트를 사용하는 단계별 예제를 살펴보겠습니다.

1. 사용할 수 있는 Angular 앱을 만듭니다.
2. app.component.ts에서 포커스 이벤트를 트리거하는 함수를 만듭니다.
3. app.component.html에서 input 요소를 만들고 focus 이벤트를 설정합니다.
4. ng Serve를 사용하여 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>

출력:

콘솔의 출력은 입력 필드에 초점을 맞출 때마다 표시됩니다.

버튼을 클릭할 때 콘솔에 "Focus Activated for this method" 메시지가 표시되는 또 다른 예를 들어보겠습니다.

코드 - 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>

출력: