AngularJS nghide

  • The ng-hide directive in AngularJS used to hides the HTML element based on the expression provided to the ng-hide attribute.
  • If the expression evaluates to true means it hides the HTML element.
  • It is supported by all HTML elements.
  • In AngularJS ng-hide is predefined CSS class, and sets the element’s display to none.

Syntax for ng-hide directive in AngularJS:

<element ng-hide= “expression” ></element>

Parameter values:

Value Description
expression An expression hides the element means if the expression returns the value is true.

Sample coding for ng-hide directive in AngularJS:

 Tryit<!DOCTYPE html>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="
        <form ng-app="" name="Form">
            <h3>ng-hide directive in AngularJS Tutorial</h3>
            <input type="checkbox" name="input" ng-model="text"><br>
            <span ng-hide="text">
                <h1>Welcome to wikitechy</h1>
                <p>ng-hide value = {{ Form.input.$valid}}</p>

ng-hide Directive in AngularJS:

<input type="checkbox" name="input" ng-model="text"><br>
<span ng-hide="text">
  • ng-hide directive hides the specified HTML elements.

Code Explanation for ng-hide directive in AngularJS:

Code Explanation for AngularJS nghide

  1. The ng-app specifies the root element (“<div> or <body>”) to define AngularJS application.
  2. The “checkbox” is declare the type value of the <input> tag.
  3. The ng-model bind an input field value to AngularJS application variable (“text”).
  4. The ng-hide directive is used to hides an HTML element. Here the “welcome to wikitechy” content does not shown.
  5. Form.input.$valid function is used to check whether it hides an element or not.

Sample Output for ng-hide directive in AngularJS:

Sample Output1 for AngularJS nghide

  1. The output displays the default value of the content “welcome to wikitechy”.
Sample Output2 for AngularJS nghide

  1. If the user clicks the checkbox in the input field.
  2. The output shows the content “welcome to Wikitechy” is hided.

Related Searches to angularjs ng-hide directive