Ng-if is a built-in Angular directive for adding and removing content from the DOM. Ng-if is extremely handy for showing and hiding buttons, links, text, images, or other types of content on a page. We covered the differences between ng-show, ng-hide, and ng-if here, so this post will focus specifically on ng-if syntax, examples, and use cases.
Why Use Ng-If at all?
Why should we add/remove content from the DOM vs. just hiding/showing it? Why use ng-if at all? It comes down to the way Angular watches for changes in an app. Angular uses a digest loop to watch for changes in an app to make changes in the view or model (two-way data binding). Watches are expensive from a performance standpoint. By removing an element from the DOM, you remove all the watchers on those elements. Having few watches in an app generally allows it to run faster.
Ng-if, like most built-in directives relies upon evaluating an expression as true or false. In the case of ng-if, if the expression evaluates false, it removes the element from the DOM entirely (as in, the node is gone). If it’s true, the element gets recreated.
Put more simply, ng-if allows you to display or remove elements based on scope (or model) values. Even more simply: If a value is false in your model, ng-if will remove the appropriate element from the DOM (and vice versa).
Let’s see some examples:
Example #1 – Simple Hide and Show
In the example below, the model is determined by the scope boolean value showDiv. A simple ng-click on the checkbox, toggles whether showDiv is true or false.
If you hop into the developer tools, you’ll that the div is removed entirely when it is toggled off:
Pretty dang straightforward.
Example #2 – Using ng-if with ng-repeat
Here’s a fun example of ng-if being using within ng-repeat. This was made by developer Nick Moreton. This example completes the requirements for FizzBuzz, which is an old programming interview test. The test is to:
“Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”.”
Nick shows how this can be done with a simple for loop, ng-repeat and ng-if. The page contains spans for displaying either the number, or ‘Fizz’, ‘Buzz’, or ‘FizzBuzz’. The ng-if expressions on the spans evaluate whether that element of the array is a multiple of three or five and adds or removes the element from the DOM.
If we look again at the html in the developer tools, we can see that the DOM elements aren’t there, only html comments in there place.
Example #3 – ng-if with multiple conditions
You might hit a situation where you need to evaluate multiple expressions to add/remove content (effectively hiding/showing).
The example below evaluates two properties on the model to add/remove the tag. If the person is picky, it shows their more detailed coffee preference.
Caveat #1: Event Handlers and ng-if
Ng-if will completely removes the element from the DOM/page (vs. simply hiding its visibility). That means that any event handlers attached to those elements will be destroyed when they are removed. When the element is put back into place using ng-if, the event handlers will need to be attached again. However, if you use ng-click to take care of events, Angular will take care of the events for you.
Caveat #2: Child Scope and ng-if
Ng-if creates a new child scope when it adds and removes DOM nodes. The new child scope is going to inherit from the parent scope. So if something doesn’t exist in the child scope, it will then go up the inheritance chain to see if the parent has it. In many cases, you won’t notice the new scope being created. But your code/state could get confusing if you’re not aware that ng-if has create a new scope.
If you’re curious, Misko Hevery explains here why directives like ng-if and ng-switch create their own child scope.
Ng-if is a useful directive for adding and removing (therefore hiding/showing) content on a page. It allows for many apps to run faster but it’s not without a few caveats and potential pitfalls
Latest posts by Kyle Pennell (see all)
- Falling Back in Love with the Front End: An Interview with Azat Mardan - May 18, 2017
- How WebRTC Has Changed Web Communication - May 11, 2017
- The Angular CLI: A Simple Way to Fire up an Angular 2 Project - April 18, 2017