AngularJS Events: ng-click, ng-show, ng-hide [Example]

Details

When creating web-based applications, sooner or later your application will need to handle DOM events like mouse clicks, moves, keyboard presses, change events, etc.

AngularJS can add functionality which can be used to handle such events.

For example, if there is a button on the page and you want to process something when the button is clicked, we can use the ng-click event directive.

We will look into Event directives in detail during this course.

In this tutorial, you will learn-

What is ng-click directive?

The "ng-click directive" is used to apply custom behavior to when an element in HTML clicked. This is normally used for buttons because that is the most common place for adding events which respond to clicks performed by the user

Let's look a simple example of how we can implement the click event.

In this example, we will have a counter variable which will increment in value when the user clicks a button.

Learn AngularJS Events: ng-click, ng-show, ng-hide 

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="">

<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> gtupapers Global Event</h1>

<button ng-click="count = count + 1" ng-init="count=0">
    Increment
</button>

<div>The Current Count is {{count}}</div>

</body>
</html>

Code Explanation:

  1. We are first using the ng-init directive to set the value of a local variable count to 0.
  2. We are then introducing the ng-click event directive to the button. In this directive, we are writing code to increment the value of the count variable by 1.
  3. Here we are displaying the value of the count variable to the user.

If the code is executed successfully, the following Output will be shown when you run your code in the browser.

Output:

Learn AngularJS Events: ng-click, ng-show, ng-hide

From the above output,

Learn AngularJS Events: ng-click, ng-show, ng-hide

What is ng-show directive?

ng-Show directive is used to show or hide a given HTML element based on the expression provided to the ngShow attribute. In the background, the element is shown or hidden by removing or adding the .ng-hide CSS class onto the element.

In the background, the element is shown or hidden by removing or adding the .ng-hide CSS class onto the element.

Let's look at an example of how we can use the "ngshow event" directive to display a hidden element.

ng-show in AngularJS 

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> gtupapers Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Show Angular" ng-click="ShowHide()"/>

    <br><br><div ng-show = "IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope){
        $scope.IsVisible = false;

        $scope.ShowHide = function(){
            $scope.IsVisible = true;
        }
        });
</script>

</body>
</html>

Code Explanation:

  1. We are attaching the ng-click event directive to the button element. Over here we are referencing a function called "ShowHide" which is defined in our controller – DemoController.
  2. We are attaching the ng-show attribute to a div tag which contains the text Angular. This is the tag which we are going to show/hide based on the ng-show attribute.

  3. In the controller, we are attaching the "IsVisible" member variable to the scope object. This attribute will be passed to the ng-show angular attribute (step#2) to control the visibility of the div control. We are initially setting this to false so that when the page is first displayed the div tag will be hidden.

    Note:- When the attributes ng-show is set to true, the subsequent control which in our case is the div tag will be shown to the user. When the ng-show attribute is set to false the control will be hidden from the user.

  4. We are adding code to the ShowHide function which will set the IsVisible member variable to true so that the div tag can be shown to the user.

If the code is executed successfully, the following Output will be shown when you run your code in the browser.

Output:1

Learn AngularJS Events: ng-click, ng-show, ng-hide

From the output,

Learn AngularJS Events: ng-click, ng-show, ng-hide

The output now shows the div tag with the Angular text.

What is ng-hide directive?

With the ng-hide directive an element will be hidden if the expression is TRUE. If the Expression is FALSE the element will be shown. In the background, the element is shown or hidden by removing or adding the .ng-hide CSS class onto the element.

On the other hand with ng-hide, the element is hidden if the expression is true and it will be shown if it is false.

Let's look at the similar example as the one shown for ngShow to showcase how the ngHide attribute can be used.

ng-hide in AngularJS 

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> gtupapers Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Hide Angular" ng-click="ShowHide()"/>

    <br><br><div ng-hide="IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope){
        $scope.IsVisible = false;

        $scope.ShowHide = function(){
            $scope.IsVisible = $scope.IsVisible = true;
        }
        });
</script>

</body>
</html>

Code Explanation:

  1. We are attaching the ng-click event directive to the button element. Over here we are referencing a function called ShowHide which is defined in our controller – DemoController.
  2. We are attaching the ng-hide attribute to a div tag which contains the text Angular. This is the tag, which we are going to show/hide based on the ng-show attribute.
  3. In the controller, we are attaching the isVisible member variable to the scope object. This attribute will be passed to the ng-show angular attribute to control the visibility of the div control. We are initially setting this to false so that when the page is first displayed the div tag will be hidden.
  4. We are adding code to the ShowHide function which will set the IsVisible member variable to true so that the div tag can be shown to the user.

If the code is executed successfully, the following Output will be shown when you run your code in the browser.

Output:

Learn AngularJS Events: ng-click, ng-show, ng-hide

From the output,

Learn AngularJS Events: ng-click, ng-show, ng-hide

AngularJS Event Listener Directives

You can add AngularJS event listeners to your HTML elements by using one or more of these directives:

Summary

 

YOU MIGHT LIKE: