what is ng-if

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.

Example of ng-if

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 ng-app>
       Enter your number: - <input type="text" ng-model="n1" placeholder="9">
    <div ng-if="n1%2=='0'">
        <p>Even Number</p>
    </div>
    <div ng-if="n1%2! ='0'">
        <p>Odd Number</p>
    </div>
   </body>
</html>

		
		

Now executes the code and you will get following output

		
		what is ng-if
		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.