AngularJS ng-if Directive – How to show/hide HTML Element using ng-if based on jQuery Datepicker Selection

Last updated: 8th April 2026

The ng-if directive is a built-in feature of AngularJS that dynamically removes or recreates HTML elements in the DOM. It's especially useful when you need to conditionally display or hide elements based on specific criteria. In this tutorial, I'll demonstrate how to use the ng-if directive to show or hide an HTML element, such as a textbox, based on a selection made in a jQuery Datepicker within an AngularJS application.

AngularJS ng-if Syntax

The ng-if directive evaluates an expression based on true or false. If the expression evaluates to false it would remove the element from the DOM. In case the expression is true, it will recreate the element.

See this demo

Why did I choose the jQuery Datepicker for this example? While working on a recent project, I encountered a scenario involving several HTML elements, such as a <p> tag, an <input> field, and others, where I needed dynamic control over visibility. Specifically, I wanted the <input> field (nested inside a <p> element) to appear only after a date was selected from the Datepicker. By default, the input box remains hidden, and if the selected date is cleared, the input automatically disappears again. This use case provides a simple and practical way to demonstrate conditional rendering.

Let’s see how this is done.

The Markup

Since I am using jQuery Datepicker widget in my example, I’ll add the Datepicker library (the CDN) in the <head> section, before AngularJS library (CDN).

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" 
        ng-controller="myController">

        <p>
            <input type="text" id="date" datepicker ng-model="datevalue" placeholder="Select a date" />
        </p>
        <p ng-if="datevalue">
            <input type="text" placeholder="Enter some value" />
        </p>
    </div>
</body>

I have an <input> box with the attribute datepicker. I’ll add a directive in the <script> section that will add the Datepicker to the <input> box. The ng-if checks if the ng-model datevalue is true of false. True if a date is selected and false if you remove the date.

Now, what is interesting is to see which element I have added the ng-if directive. In the example above, the ng-if directive is in the <p> element. You could have included the directive to the <input> box itself, like this …

This is ok if you just want to remove or recreate the <input> box alone. However, you may have other elements such as a submit button or a label etc. that sits in a container and are related, functionally. In this case, you will have to add the ng-if directive to the container, like above example.

<p ng-if="datevalue">
    <input type="text" placeholder="Enter some value" />
</p>

The Script

The script just has a directive to add the jQuery Datepicker to the model.

<script>
    var myApp = angular.module('myApp', []);
    myApp.controller('myController',
        function ($scope) {});

    // DIRECTIVE FOR Datepicker.
    myApp.directive("datepicker", function () {
        function link(scope, element, attrs, controller) {
            element.datepicker({
                onSelect: function (dt) {
                    scope.$apply(function () {
                        controller.$setViewValue(dt);
                    });
                },
                dateFormat: "dd/mm/yy"
            });
        }
        return { require: 'ngModel', link: link };
    });
</script>
</html>

See this demo

Conclusion

The AngularJS ng-if directive works on many other HTML elements, like a button, <div>, links etc. Its primary function is to show or hide elements as and when required. I found this directive interesting for the reason that you do have to use the onchange event.

In the above example, the textbox or the <p> elements show or hide when the value (the date) changes. Usually, the first thing that would have come to your mind would be to use the onchange event. With AngularJS, just use ng-if directive.

← PreviousNext →