As we approach March 2017, Angular version 4 is almost here. Staying true to the official release schedule
the first RC for Angular 4.0 has recently been released. There are many exciting new features, described
in the release candidate changelog,
like the improved view engine and server side rendering. Among them, is long awaited support for
if - else syntax
in the template.
What used to be either two separate
*ngIf directives or a
*ngSwitch, can now become an elegant
*ngIf="condition; else templateReference"
<h1 *ngIf="title; else elseBlock">
Using If - Else syntax in Angular
<ng-template #elseBlock>No title</ng-template>
As you can see in the snippet above, after the
else keyword, we're passing in a template reference variable,
that tells Angular which DOM element we want to render when the condition is false, in this case, when the
title is falsy.
elseBlock is just a variable, it can be whatever string you want. This should help simplify your template logic a little.
On top of this, there are more syntax improvements coming in Angular 4.0, like better integration with the
async pipe, so keep your eyes open for more.