Angular의 블러 이벤트

이 기사에서는 예제와 함께 Angular의 blur 이벤트를 소개합니다.

Angular에서 흐림

Angular에서 blur 이벤트를 사용해야 하는 상황이 많이 있습니다. 예를 들어 필드의 유효성을 검사하기 위해 필드의 포커스가 손실될 때 특정 필드의 유효성을 검사할 수 있습니다.

Angular는 이러한 상황에 대해 blur 이벤트를 제공합니다.

blur 이벤트는 요소가 초점을 잃으면 시작됩니다. Angular의 blur 이벤트 구문은 다음과 같습니다.

<input (blur)='DoSomething()'/>

다음 명령을 사용하여 Angular에서 새 응용 프로그램을 만들어 보겠습니다.

ng new my-app

Angular에서 새 응용 프로그램을 만든 후 이 명령을 사용하여 응용 프로그램 디렉터리로 이동합니다.

cd my-app

이제 앱을 실행하여 모든 종속 항목이 올바르게 설치되었는지 확인하겠습니다.

ng serve --open

app.component.ts에서 아래와 같이 blur 이벤트에서 트리거되는 함수를 생성합니다.

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

type Fruit = Array<{ id: number; name: string }>;

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

export class AppComponent {
  blurEvent(): void {
    console.log('Blur event Activated!');
}
}

app.component.html에서 아래와 같이 input 요소를 만들고 blur 이벤트를 설정합니다.

<label>Enter Name:</label>
<input type="text" placeholder="Enter name.." (blur)="blurEvent()">

이제 다음 명령을 실행하여 Angular 앱을 제공하겠습니다.

ng serve

출력:

위의 예는 입력에서 포커스를 잃을 때마다 blur 이벤트가 활성화됨을 보여줍니다.

데모