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.
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
We can also use and (&&) or (||) operator in ng-if to evaluate the expression. We can also use nested ng-if in angularjs.