NgIf Else lands in Angular 2.x+/4.0

An introduction to ngIf Else syntax in latest AngularJs

Recently angular 2 team released their release plan and god they are aggressive. At least with the versioning side of things which has led to a good amount of Chaos in the community.

I really want to make this very clear that angular team has clarified their vision and also the roadmap that the core stable API’s and the basics won’t change ever(if we can assume that.)

So sit back and relax people while the Angular 2.0 team release next major 4 versions.

NgIf / Else in Angular 2.0

Actually, I should be frank here with you guys and tell you that Angular 2.0 is not getting this feature but Angular 4.0 is, don’t believe me check this commit. Moreover, you should also check this blog post and you will get more context as to what I am talking about here yes they are skipping version 3.0. Lol ..:)

Good news all future versions will be more or less backwards compatible.

Angular 4.0 already duh

Now let see how we can use NgIf Else syntax which is already in the latest master branch at version 4.0.0-beta.0. check the latest version of the directive here.

// Syntax for ngIf/Else
<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>

Pretty straightforward right. Depending on the condition ngIf template or else template would be shown. Wait there is more to it than just that.

Actually, diving a little deeper into the code we can find out that it’s always the then template or else template which gets rendered. By default, the ngIf template gets assigned to the then template unless the then template is specified explicitly.

By default, else template is null, unless specified by a local reference to an HTML element.

We can see here how _thenTemplateRef & _elseTemplateRef are assigned for implicit and explicit usage of ngIf directive. _thenTemplateRef is used by default & _elseTemplateRef if its specified.

Remember the else and then templates are just local binding that can also change at runtime. This gives us immense power to make our interaction very dynamic.

Observables Gotcha!

We’ve been working with angular2 for some time now and whenever it’s a complex form in question that needs some data fetched from an API we can be seen creating an observable and then subscribing in the template using the async pipe. One problem with that approach is latency. Data never arrives on time so we have to use the safe-traversal-operator ?.

As a result of this, our code looks very ugly along with many problems.

1. We cannot display anything else while waiting for asynchronous data to arrive without creating another directive which accounts for falsy condition.
2. Excessive use of safe-traversal-opertor(almost on all the properties).
3. We have to place the async pipe in parenthesis.

Using ngIf can make things simpler for all the above cases.

1. We use only one async pipe and hence only one subscription gets created.
2. ngIf stores the result of the $userObservable|async in the local variable user.
3. The local user can then be bound repeatedly in a more efficient way.
4. No need to use the safe-traversal-operator `?.` to access properties as ngIf will only display the data if $userObservable returns a value.
5. Last but not the least, we can display an alternative template while waiting for the data.

Using NgIf / Else/ Then explicit syntax

To add then template we just have to bind it to a template explicitly.

<div *ngIf=”condition; then thenBlock else elseBlock”> ... </div> 
<ng-template #thenBlock>Then template</ng-template>
<ng-template #elseBlock>Else template</ng-template>

That’s it guys, I hope you enjoyed reading this post.

Go ahead use it in latest master branch this feature is present.

Real world example

All this theory is nice but wouldn’t it be nice if you could actually see it in a real world example.

I am one of the core contributors of AngularSpree and we have used it in this open source project at many places. AngularSpree is an open source front-end framework for SpreeCommerce(API).

Essentially, AngularSpree is for anyone who wants to use the power of SpreeCommerce and their super awesome backend but use the new Angular(2.x+) for the front-end side.

Here is one example where we had to show two different views depending on whether the orders were present or not for a user. We have leveraged this new cool syntax to achieve just that.

Feel free to checkout the project and give your feedback.

Shameless product promotion but it’s worth your time.

Teracommerce is the most scalable and complete e-commerce bundle ever built using the best in class open source e-commerce solutions like spreecommerce and angularspree. It provides end-to-end solution for your online storefront and your backend warehouse needs.

If you liked this article, click the 💚 below.

For more musings about programming, follow me here or on twitter so you’ll get notified when I write new posts.