Open In App

Angular 10 (blur) Event

Last Updated : 04 Jul, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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:



Similar Reads

jQuery UI Menu blur Event
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. It is great for building UI interfaces for the webpages. The jQuery UI Menu widget creates a menu list that is used for mouse and keyboard interactions. The jQuery UI Menu blur event triggers when a menu item loses focus. The menu blur event accep
2 min read
Angular PrimeNG Tooltip Focus and Blur
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see how to use the Tooltip Focus and Blur in Angular PrimeNG. Angular PrimeNG Tooltip Focus and Blur are used to display a to
3 min read
HTML DOM blur() Method
The DOM blur method is used to remove the keyboard focus from the current element and also give focus with the help of the focus() method. We can apply the blur to any element and enable it by doing some operations. For example, we can blur to text-box by clicking a button. Syntax: Object.blur() Example: In this example, we will use the HTML DOM bl
1 min read
Javascript Window Blur() and Window Focus() Method
Javascript Window Blur() method is used to remove focus from the current window. i.e, It sends the new open Window to the background. Syntax: Window.blur() Parameter: It does not require any parameters. Return Value: It does not return any value. Below examples illustrate the window.blur() method of JavaScript: Example: The below example illustrate
2 min read
Convert an image into Blur using HTML/CSS
Given an image and the task is to convert the image into blur image using CSS property. In CSS, filter property is used to convert an image into blur image. Filter property is mainly used to set the visual effect of an image. Syntax: filter: blur() Example 1: This example use blur filter to convert the image into blur image. Original Image: &lt;!DO
1 min read
AngularJS ng-blur Directive
The ng-blur Directive in AngularJS is fired when an HTML element loses their focus. It doesn't override with element's original onblur event i.e. both the ng-blur expression and original onblur event will execute. Syntax: &lt;element ng-blur="expression"&gt; Contents... &lt;/element&gt;Parameter: expression: It refers to the variable or the express
1 min read
Node Jimp | Blur
The blur() function is an inbuilt function in Nodejs | Jimp which uses a blur algorithm that produces a similar effect to a Gaussian blur. Syntax: blur(r, cb()) Parameter: r: This parameter stores the radius of the blur.cb: This is an optional parameter that is invoked when compilation is complete. Input Images: Setup Environment: npm init -y Insta
1 min read
CSS blur() Function
The blur() function is an inbuilt function which is used to apply a blurred effect filter on the image. Syntax: blur( radius ) Parameters: This function accepts single parameter radius which holds the blur radius in form of length. This parameter defines the value of the standard deviation to the Gaussian function. Below example illustrates the blu
1 min read
How to Create Loading Blur Text Animation Effect using HTML and CSS ?
The blur text animation is known as the Smoky effect and it is used to give our text a blurry animation. The text blurs linearly in one direction and then reappears. Approach: The approach of this article is quite simple. We are animating the blur effect using the blur() function. Then we are using n-th child property to apply the animation delay.
3 min read
How to make a glass/blur effect overlay using HTML and CSS ?
To give a background blur effect on an overlay, the CSS's backdrop-filter: blur() property is used with ::before pseudo-element. The “backdrop-filter: blur()” property gives the blur effect on the box or any element where it is desired and “before” is used to add the blurred background without applying any extra markup. HTML Code: In this section,
3 min read