ng-if in angularjs | ng-if | angularjs ng if

ng-if directive

Ng-if directive is condition based directive which removes or recreates the DOM portion according to condition. It evaluates expression as true or false. If ng-if evaluates to a false it will remove from the DOM element and if it is true, then element is reinserted into the DOM.

ng-if example

In the following example I want to take textbox value and accordingly I want to print whether it is even or odd. So we will write code in the following manner

		
<!DOCTYPE html>
<html>
<head>
    <title>ng-if example</title>
    <meta charset="UTF-8">
    <script src="angular.js"></script>
    </head>
<body data-ng-app>
       Enter your number: - <input type="text" data-ng-model="n1" placeholder="9">
    <div data-ng-if="n1%2=='0'">
        <p>Even Number</p>
    </div>
    <div data-ng-if="n1%2! ='0'">
        <p>Odd Number</p>
    </div>
   </body>
</html>

Now executes the code and you will get following output

		
		
		Figure 1

We can also use and (&&) or (||) operator in ng-if to evaluate the expression. We can also use nested ng-if in angularjs.