onFocusEvent en Angular

Rana Hasnain Khan 15 février 2024
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:

vue focalisée en Angular

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

se connecter à la console onfocus Angular

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:

événement onfocus sur les boutons Angulars

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

Article connexe - Angular Event