Angular 2 - *ngIf with an else block gives me "Can't bind to 'ngIfElse'", but *ngIf without else block works

Question

The example directly from angular.io will not work for me:

<button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
show = {{show}}
<br>
<div *ngIf="show; else elseBlock">Text to show</div>
<template #elseBlock>Alternate text while primary text is hidden</template>

Instead, the browser console errors: "Can't bind to 'ngIfElse' since it isn't a known property of 'div'."

My module looks like this (I am including CommonModule):

import { CommonModule } from '@angular/common';
import { NgModule }      from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    CommonModule
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

So I'm not sure what the issue is? If I simply remove the "; else elseBlock" from the div, the *ngIf statement works as intended. Therefore, I believe my imports are correct. Any help is greatly appreciated.

Answer 1

So I got this to work after changing the angular versions in my package.json file from 2.4.0 to 4.0.0-beta.5. If you look at the angular changelog (https://github.com/angular/angular/blob/master/CHANGELOG.md) it appears that the 'else' portion of ngIf did not even work until angular 4.0.0-beta.0

I am unsure why the official documentation explains how to use 'else' because, at of the time of this writing, the latest stable version doesnt even support the 'else' portion of *ngIf