How to check an element with ng-if is visible on DOM ?

23 Sep, 2021
ng-if directive: The ng-if directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. If the expression inside it is false then the element is removed and if it is true then the element is added to the DOM.
Syntax:
<element ng-if="expression"> Contents... </element>
Approach:
Consider a checkoff list made containing three items.
Once all the items are bought then we display a message — “Everything is bought!”.
At starting NG-IF removes this message from a portion of the DOM tree and based on the expression when it gets evaluated as true as it is recreated in DOM.
To observe these changes we are going to inspect the code on Web Browser. Different ways to approach enable Inspect in Google Chrome:Menu bar -> More tools -> Developer tools.Right Click in the browser -> InspectCtrl + Shift + I (Windows)Cmd + Opt + I (Mac OS)
Menu bar -> More tools -> Developer tools.
Right Click in the browser -> Inspect
Ctrl + Shift + I (Windows)
Cmd + Opt + I (Mac OS)
Note: For more information go to chrome-inspect-element-tool-shortcut.
Code Implementation: 
HTML
<!DOCTYPE html><html> <head>    <meta name="viewport" content=        "width=device-width, initial-scale=1">    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.0/angular.min.js">    </script></head> <body ng-app="myApp">    <div ng-controller="myCtrl"        class="w3-container">        <h1 align="center" class="w3-text-green">            GeeksforGeeks        </h1>        <h4 align="center" class="w3-text-green">            A computer science portal for geeks        </h4>        <ul>            <li ng-repeat="item in items">                Buy {{item.name}} {{item.quantity}}                <button ng-click=Bought($index)                    class="w3-button w3-round w3-border                        w3-margin-bottom">                    Bought                </button>            </li>        </ul>        <p class="w3-text-red" align="center"            ng-if="items.length == 0">            Everything is Bought!        </p>      </div>    <script type="text/javascript">        (function () {            angular.module("myApp", []).controller(                "myCtrl", function ($scope) {                $scope.items = [                    { name: "Milk", quantity: "2 Packet" },                    { name: "Biscuit", quantity: "10 Packet" },                    { name: "Bread", quantity: "5 Packet" }                ];                $scope.Bought = function (index) {                    $scope.items.splice(index, 1);                };            });        })();    </script></body> </html>
Output:
Before Clicking all buttons: Here, we have three buttons to click and buy respective items.
In Inspect window: we can see that ng-if is commented out and a part of the DOM tree as expression evaluated to be False.
After Clicking all buttons: As we have clicked all the buttons and purchased every item, a message is displayed on the screen.
In Inspect window: we can see that ng-if is now not commented anymore and now it is a part of the DOM tree as expression evaluated to be True.
This gif output shows what all is happening.
anikakapoor
AngularJS-Misc
AngularJS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Auth Guards in Angular 9/10/11
Routing in Angular 9/10
How to bundle an Angular app for production?
What is AOT and JIT Compiler in Angular ?
Angular PrimeNG Dropdown Component
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?