AngularJS ng-click, ng-show & ng-hide Directives

By : James Hartman James Hartman
Hours Updated

⚡ Smart Summary

AngularJS Events let a web application respond to user input such as mouse clicks, key presses, and hover actions. Directives including ng-click, ng-show, and ng-hide bind that behaviour declaratively in markup instead of through manual DOM listeners.

  • 🖱️ Click Handling: ng-click attaches an expression or controller function to an element, most commonly a button.
  • 👁️ Conditional Display: ng-show renders an element when its expression is true, while ng-hide removes it when the expression is true.
  • 🎨 Mechanism: Both directives toggle the built-in ng-hide CSS class, which sets display to none, so the element stays in the DOM.
  • 🔗 Scope Binding: A member variable placed on $scope drives visibility, and changing it inside a handler updates the view immediately.
  • 📋 Directive Range: Eighteen listener directives cover blur, change, focus, keyboard, mouse, paste, and submit events.
  • ⚠️ Support Status: AngularJS reached end of life on 31 December 2021, so new projects should target modern Angular instead.
Read More

AngularJS ng-click ng-show ng-hide Directives

AngularJS Events

AngularJS Events are the functionalities that allow web applications to interact with user inputs such as mouse clicks, keyboard input, and mouse hover. Events must be handled in web applications in order to perform specific tasks and actions, and each one is triggered when the user performs the matching action.

When creating web applications, sooner or later your application needs to handle DOM events such as mouse clicks and moves, keyboard presses, and change events. AngularJS supplies directives that handle these events declaratively.

For example, if a button on the page should process something when clicked, the ng-click event directive provides that hook.

⚠️ Support notice: AngularJS reached end of life on 31 December 2021 and receives no further patches or security fixes from the Angular team. The directives below remain accurate for maintaining existing AngularJS 1.x applications; for new work, use modern Angular, where these directives are replaced by event bindings such as (click) and by *ngIf.

What is ng-click Directive in AngularJS?

The “ng-click directive” in AngularJS applies custom behaviour when an HTML element is clicked. It is normally used on buttons, since those are the most common place to attach click responses, and it is also used to raise alerts on click.

Syntax of ng-click in AngularJS

<element
 ng-click="expression">
</element>

Example of ng-click in AngularJS

In this ng-click example, a counter variable increments each time the user clicks a button.

ng-click Directive in AngularJS

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

<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 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. The ng-init directive sets the local variable count to 0.
  2. The ng-click directive on the button increments count by 1 on each click.
  3. The interpolation {{count}} displays the current value to the user.

Output:

ng-click in AngularJS

The Increment button is displayed and the count is initially zero. Clicking it increments the value, as the image below shows.

ng-click in AngularJS

What is ng-show Directive in AngularJS?

The ng-show directive shows or hides a given HTML element based on the expression supplied to the ng-show attribute. Internally the element is shown or hidden by removing or adding the .ng-hide CSS class, a predefined class that sets display to none.

Syntax of ng-show in AngularJS

<element
 ng-show="expression">
</element>

Example of ng-show in AngularJS

This example uses ng-show to reveal a hidden element.

ng-show Directive in AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 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. The ng-click directive on the button references a ShowHide function defined in the controller DemoController.
  2. The ng-show attribute is attached to the div containing the text Angular. This is the element whose visibility is controlled.
  3. In the controller, the IsVisible member variable is placed on the scope object and initialised to false, so the div is hidden when the page first loads. With ng-show, a value of true displays the element and false hides it.
  4. The ShowHide function sets IsVisible to true so the div becomes visible.

Output:

ng-show Directive in AngularJS

The div holding the text is not shown initially, because IsVisible starts as false. Clicking Show Angular sets it to true and the text becomes visible.

ng-show Directive in AngularJS

RELATED ARTICLES

What is ng-hide Directive in AngularJS?

The ng-hide directive hides an element when its expression evaluates to TRUE, and shows the element when the expression is FALSE — the exact inverse of ng-show. Internally it uses the same .ng-hide CSS class.

Syntax of ng-hide in AngularJS

<element
 ng-hide="expression">
</element>

Example of ng-hide in AngularJS

This example mirrors the ng-show example so the two directives can be compared directly.

ng-hide Directive in AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 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 = true;
        };
    });
</script>

</body>
</html>

Code Explanation:

  1. The ng-click directive on the button references the ShowHide function in DemoController.
  2. The ng-hide attribute is attached to the div containing the text Angular.
  3. IsVisible is initialised to false. Because this is ng-hide rather than ng-show, a false value means the div is visible when the page first loads.
  4. The ShowHide function sets IsVisible to true, which hides the div.

Output:

ng-hide Directive in AngularJS

The div is shown initially because false is passed to ng-hide. Clicking Hide Angular passes true and the word disappears.

ng-hide Directive in AngularJS

ng-show vs ng-hide vs ng-if: Key Differences

Three directives control whether the user sees an element, and choosing between them affects both behaviour and rendering performance. The first two only toggle a CSS class, so the element is always present in the page; the third adds and removes the element itself.

Aspect ng-show ng-hide ng-if
Element visible when Expression is true Expression is false Expression is true
Element in the DOM Always Always Only while true
Method used Toggles .ng-hide class Toggles .ng-hide class Creates and destroys the element
Child scope Shares the parent scope Shares the parent scope Creates a new child scope
Watchers when hidden Still active Still active Removed
Best for Frequent toggling of light content Inverted conditions Heavy content shown rarely

Use ng-show or ng-hide when an element toggles often, because the element is never rebuilt and the toggle costs only a class change. Use ng-if for expensive sections shown rarely, since removing the element also removes its watchers and reduces digest cost on every cycle.

AngularJS Event Listener Directives

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

  • ng-blur
  • ng-change
  • ng-click
  • ng-copy
  • ng-cut
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-paste
  • ng-submit

Each directive accepts an expression, and the raw browser event is available inside it as $event when the handler needs details such as the pressed key or the click coordinates.

FAQs

Pass the reserved $event variable, as in ng-click="handle($event)". The controller then receives the native event and can read target, coordinates, or call preventDefault.

ng-repeat creates a child scope per item, so assigning a primitive inside the handler updates only that child. Write to an object property on the parent scope, or use $parent, to make the change visible outside.

Partly. AI tools convert ng-click to (click) and ng-show to *ngIf reliably, but scope-dependent logic and two-way bindings need manual review, because AngularJS scope has no direct Angular equivalent.

AI assistants spot the usual causes quickly: a missing ng-app, a controller name that does not match the module registration, or a typo in the directive attribute. The suggested fix still needs testing in the browser.

No. AngularJS provides ng-show, ng-hide, and ng-if only. There is no ng-visible directive, and referencing one produces no effect because AngularJS ignores unrecognised attributes.

Summarize this post with: