The ng-change directive in AngularJS evaluates a given expression whenever the user changes the input. On every change, the ngChange directive is fired and the expression is evaluated immediately. The JavaScript onChange event only triggers at the end of a change (when the user leaves the form element or presses the key).

Note − This directive also requires ngModel to be present.

Syntax

..Content..

Example − ngChange Directive

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

   
      

      
   

   
   

      Welcome to Tutorials Point
   
      

         AngularJS | ngChange Directive
   

      

         Check to show/hide details
         
         



         

            Start Learning the new Angular JS features now...
         
      

      
      

   

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.

Example 2

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

   
      

      
   

   
   

      Welcome to Tutorials Point
   
      

         AngularJS | ngChange Directive
   

      

         

            Are you a developer:
            
         
         Count: {{cnt}}
         
{{isTrue}}
      

      
      

   

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.