photo-1453060113865-968cea1ad53a

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.

Explore Angular Courses

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.

Syntax

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:

Before:

 

 

 

After

Pretty dang straightforward.

See the Pen Basic ng-if examples by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

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:

Explore Angular Courses

“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.

See the Pen Angular FizzBuzz ng-repeat by Nick Moreton (@nickmoreton) on CodePen.


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 JavaScript OR and AND operators (|| and &&) can be used within ng-if expressions. This allows you to test multiple values within ng-if (just like you can in code). This works much in the same way as ng-switch, but with arguably a bit simpler syntax.

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.

See the Pen ng-if || quick example by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

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.

Explore Angular Courses

If you’re curious, Misko Hevery explains here why directives like ng-if and ng-switch create their own child scope.

Summary

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