The ng-blur Directive in AngularJS is fired when an element loses focus from that element. The blur event is executed synchronously along with the DOM manipulations (like removing from the focus point).

AngularJS also executes the expression using scope.$evalAsync if the event is fired during an $apply to ensure the consistent application state.

Syntax

..Content..

Example 1 − ng-blur Directive

Create a file "ngBlur.html" in your Angular project directory and copy-paste the following code snippet.

   
      

      
   

   
      

         Welcome to Tutorials Point
      
      

         AngularJS | ngBlur Directive
      
      

         

            
Input Text Box Focused
            
         
      

      
      

Output

To run the above code, just go to your file and run it as a normal HTML file. You will see the following output on the browser window.

When the textBox is focussed, the message appears −

Example 2

Create a file "ngBlur.html" in your Angular project directory and copy-paste the following code snippet.

   
      

      
   


   

      Welcome to Tutorials Point
   
    

      AngularJS | ngBlur Directive
   

   

   
Number of times box was focussed: {{count}}

Output

To run the above code, just go to your file and run it as a normal HTML file. You will see the following output on the browser window.