onFocusEvent en Angular

Dans cet article, nous allons aborder le focus() Angular et expliquer avec exemple son fonctionnement.

Utilisez onFocusEvent() dans Angular

Nous verrons ce qu’est l’événement focus dans Angular 10 et comment nous pouvons l’utiliser. Lorsqu’un élément obtient son focus, l’événement focus est déclenché.

# Angular

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

Le NgModule utilisé par l’événement de focus est CommonModule.

Prenons un exemple étape par étape en utilisant l’événement focus.

1. Créez une application Angular que nous pouvons utiliser.
2. Dans app.component.ts, créez une fonction qui se déclenche sur l’événement de focus.
3. Dans app.component.html, créez un élément d’entrée et définissez l’événement focus.
4. Servez l’application Angular à l’aide de ng serve pour voir la sortie.

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

Code - app.component.html:

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

Production:

La sortie dans la console est affichée chaque fois que nous nous concentrons sur le champ de saisie.

Prenons un autre exemple où le message "Focus Activated for this method" s’affiche dans la console lors du clic sur le bouton.

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

Code - app.component.html:

# Angular

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

Production: