onFocusEvent in Angular

In diesem Artikel gehen wir auf den Angular focus() ein und erklären anhand eines Beispiels, wie er funktioniert.

Verwendung von onFocusEvent() in Angular

Wir werden sehen, was das Fokusereignis in Angular 10 ist und wie wir es verwenden können. Wenn ein Element seinen Fokus erhält, wird das Focus-Ereignis ausgelöst.

# Angular

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

Das vom Fokusereignis verwendete NgModule ist CommonModule.

Sehen wir uns ein Schritt-für-Schritt-Beispiel mit dem Fokusereignis an.

1. Erstellen Sie eine Angular-App, die wir verwenden können.
2. Erstellen Sie in app.component.ts eine Funktion, die auf ein Fokusereignis auslöst.
3. Erstellen Sie in app.component.html ein Eingabeelement und legen Sie das Fokusereignis fest.
4. Bedienen Sie die Angular-App mit ng serve, um die Ausgabe anzuzeigen.

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>

Ausgabe:

Die Ausgabe in der Konsole wird angezeigt, wenn wir uns auf das Eingabefeld konzentrieren.

Sehen wir uns ein weiteres Beispiel an, bei dem die Meldung "Focus Activated for this method" in der Konsole angezeigt wird, wenn Sie auf die Schaltfläche klicken.

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>

Ausgabe: