Skip to content
Related Articles

Related Articles

Angular 10 (blur) Event

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 04 Jul, 2021
Improve Article
Save Article

In this article, we are going to see what is blur event in Angular 10 and how to use it. The blur event is triggered when an element loses its focus.

Syntax:

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

NgModule: Module used by blur event is:

  • CommonModule

Approach:

  • Create an Angular app to be used.
  • In app.component.ts make a function that triggers on blur event.
  • In app.component.html make an input element and set blur event.
  • Serve the angular app using ng serve to see the output.

 

Example 1:

app.component.ts




import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
  
export class AppComponent {
    onBlur(): void {
        console.log('Focus Is Lost for this Element');
    }
}

app.component.html




<br>
<form>
    <input placeholder="Name" (blur) = 'onBlur()'>
</form>

Output:

Example 2:

app.component.ts




import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
  
export class AppComponent {
    onBlur(): void {
        console.log('Focus Is Lost for this Element');
    }
}

app.component.html




<br>
<form>
    <button  (blur) = 'onBlur()'>Click Here!!</button>
</form>

Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!