Angular icon Get $100 off the 7-Courses Angular Master Bundle!

See the bundle then add to cart and your discount is applied.

days
hours
mins
secs

Angulars NgIf, Else, Then - Explained

Feb 20, 2020 6 mins read

Angular post

Let’s look at the NgIf directive in this tutorial and uncover how to use it. We’ll also explore using NgIf with the “Else” statement and “Then”, to give you a full guide on how to use it.

You will learn how to show and hide DOM content based on your data, which we can then let NgIf handle and render updates to the DOM for us!

What is NgIf?

Before we dive in too deep, let’s learn the concepts behind NgIf and why it exists for us to use.

Exploring JavaScript Array Methods cover

⚡️ FREE eBook: 🔥 ForEach, Map, Filter, Reduce, Some, Every, Find

Todd Motto “This book is straight to the point, syntax exploration, comprehensive guide, real-world examples, tips and tricks - it covers all you need” Todd Motto, author of Exploring JavaScript Array Methods

NgIf is a behavioral directive that allows us to toggle a template based on a conditional statement.

This conditional statement would be evaluated similar to how our JavaScript would evaluate an if (condition) {} statement, converting the value you supply to a truthy or falsy value and rendering accordingly.

Let’s explore the ins and outs of ngIf, and how we can utilise (the right way) in our Angular apps.

Using Angular’s NgIf

The syntax for NgIf is nice and simple, we simply can declare it on an element, or component, and let it work its magic.

Placing the ngIf directive on a component, or element, will in fact hide or show that element based on the expression you pass it to be evaluated.

Angular will simply add or remove your DOM nodes, mount or remount your components as the expression changes (if it ever does, that’s up to you).

We’ll also cover why we use the asterisk syntax, shortly.

Standard *ngIf in Angular

There are four main ways we can use ngIf, so let’s start by exploring the most basic use case.

Let’s take an empty component and a simple Boolean value of true:

@Component({
  selector: 'app-component',
  template: `
    <div>
      Welcome back!
    </div>
  `,
})
export class AppComponent {
  isLoggedIn = true;
}

We can also use JavaScript-like expressions to achieve a final truthy/falsy value to supply to ngIf - as well as composing through multiple variables through various operators.

The basic syntax of the ngIf directive is simple and effective, all we need to do is prefix the directive name with an asterisk (*) and add it anywhere inside our template:

<!-- negated variable to achieve "if not" -->
<div *ngIf="!isLoggedIn">
  Please login, friend.
</div>

<!-- logic && operator -->
<div *ngIf="isLoggedIn && !isNewUser">
  Welcome back, friend.
</div>

<!-- logic OR operator -->
<div *ngIf="isLoggedIn || isNewUser">
  Welcome!
</div>

Just a few examples, but I’m sure you can see how easy and clean it is to use ngIf. Note that the ngIf used is a lowercase “n” when declared on an element or component.

Let’s move onto some more interesting examples!

*ngIf and Else

One fantastic addition in Angular is the “else” statement. It behaves very similar to a JavaScript if (condition) { } else { } statement. Nice and simple!

Here’s how we can use the “else” statement, to control the render flow inside a component’s template:

<div *ngIf="isLoggedIn; else loggedOut">
  Welcome back, friend.
</div>

<ng-template #loggedOut>
  Please friend, login.
</ng-template>

Woah, what’s this whole #loggedOut syntax? That’s a template variable. You can name template variables as you wish.

Using a template variable means that we can create a reference to a specific template part and then use it elsewhere - in this example we’re supplying it as an “else” value to ngIf.

We use the <ng-template> because much like it’s HTML5 counterpart <template>, it’s also considered “virtual”.

Being “virtual” means the <ng-template> contents won’t actually exist in the compiled DOM, until it’s needed (you will never see it until Angular renders it).

When it’s needed (for example the “else” expression kicks into play), Angular will grab the contents of the <ng-template> tag, and replace the *ngIf contents with it. That’s it.

So, before we continue, where does this * asterisk come from? Let’s learn some more advanced topics and concepts about Angular and its templating engine.

ngIf and ng-template

If you’ve not yet explored the <ng-template> syntax of NgIf, then you’re about to learn some amazing new skills. It’s all about sugar syntax. When we do this:

<div *ngIf="isLoggedIn">
  Welcome back, friend.
</div>

What’s actually happening is something like this:

<ng-template [ngIf]="isLoggedIn">
  <div>
    Welcome back, friend.
  </div>
</ng-template>

That’s quite a leap if you’ve never seen it before, or perhaps saw it in the documentation once and quickly closed the page.

In essence, Angular will convert our *ngIf syntax across to the above internally. This tells us more about what’s happening with [ngIf], which is the directive being bound with a property binding syntax (square brackets []).

Yes, this does mean, we can supply ngIf, ngIfElse (and ngIfThen) the same way:

<ng-template [ngIf]="isLoggedIn" [ngIfElse]="loggedOut">
  <div>
    Welcome back, friend.
  </div>
</ng-template>

<ng-template #loggedOut>
  <div>
    Please friend, login.
  </div>
</ng-template>

But let’s not skip too far ahead, we’ve not covered ngIfThen just yet…

*ngIf, Then and Else

Let’s learn about the “then” syntax with NgIf.

Adopting the then syntax alongside ngIf means we can clean up our templates a little and make them a bit more “separate”, this promotes clean code and a nice pattern to work with.

Using the “then” syntax also creates more flexibility in some use cases, where we can dynamically change the template reference to then - essentially swapping <ng-template> on the fly (a less common use case however).

You could optionally adopt this approach to create a more descriptive if/then/else block. Again, this comes down to use cases and preferences for what (could be) more advanced use cases:

<ng-container
  *ngIf="isLoggedIn; then loggedIn; else loggedOut">
</ng-container>

<ng-template #loggedIn>
  <div>
    Welcome back, friend.
  </div>
</ng-template>
<ng-template #loggedOut>
  <div>
    Please friend, login.
  </div>
</ng-template>

Thinking more about our JavaScript, this syntax aligns more with thinking in the flow of ternary statements.

Our thinking above could be converted to:

ngIf = expression ? then : else;

You’ll note that “expression” is never used, it is only there to tell the JavaScript runtime which value to render. The same applies with the ng-container example I’ve used above - which would mean we don’t render a DOM node until our NgIf expression is evaluated and subsequently rendered.

NgIf or [hidden]?

It’s interesting to note that even though NgIf “hides” our content, it actually gets completely destroyed by Angular whenever it needs to render or remove the template or component we bind it to.

If we’d like our content to still be visible in the DOM, however remain hidden, then we should introduce the hidden attribute:

<div [hidden]="!isLoggedIn">
  Welcome back, friend.
</div>

This would then allow Angular to add a hidden attribute if the isLoggedIn property was true - we can show the nice message!

You’ll note here that I’ve negated the expression by using the not (!) operator within the expression.

You could say the hidden attribute is a more sophisticated style="display: none;".

If something is marked hidden, it is hidden from all presentations, including, for instance, screen readers. Read more on MDN about hidden.

*ngIf, Observables and Async Pipe

Another fantastic addition to ngIf, the async pipe “as” syntax . Learn about this over here in my next post. You’ll learn how to use Observables alongside your new found NgIf knowledge.

Exploring JavaScript Array Methods cover

⚡️ FREE eBook: 🔥 ForEach, Map, Filter, Reduce, Some, Every, Find

Todd Motto “This book is straight to the point, syntax exploration, comprehensive guide, real-world examples, tips and tricks - it covers all you need” Todd Motto, author of Exploring JavaScript Array Methods

To learn more techniques, best practices and real-world expert knowledge, I’d highly recommend checking out my Angular courses - they will guide you through your journey to mastering Angular to the fullest!

You'll also like...