NgIf doesn't work otherwise

Question

I keep getting an error

Cannot bind to 'ngIfElse', as this is not a known property of 'ul'.

I’m sure that somewhere I’m making a stupid mistake, but I can’t find it.

<ul *ngIf="!finished; else elseBlock" id='time'> <li id='hour' class="chart" data-percent="100"><span>{{hour}} </span></li> <li id='min' class="chart" data-percent="100"><span>{{minute}}</span></li> <li id='second' class="chart" data-percent="100"><span>{{second}}</span></li> </ul> <ng-template #elseBlock> <h4 id='time'>DONE</h4> </ng-template> 

Answer 1

Angular 2 does not support Esle, you have 2 options:

1: use positive case:

 <ul *ngIf="!finished" id="time"> <li id='hour' class="chart" data-percent="100"><span>{{hour}} </span></li> <li id='min' class="chart" data-percent="100"><span>{{minute}}</span></li> <li id='second' class="chart" data-percent="100"><span>{{second}}</span</li> </ul> <h4 id="time" *ngIf="finished"> <!-- this --> DONE </h4> 

2: upgrade the application to Angular 4:

On Linux / Mac:

 npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save 

On Windows:

 npm install @angular/ common@latest @angular/ compiler@latest @angular/ compiler-cli@latest @angular/ core@latest @angular/ forms@latest @angular/ http@latest @angular/ platform-browser@latest @angular/ platform-browser-dynamic@latest @angular/ platform-server@latest @angular/ router@latest @angular/ animations@latest typescript@latest --save 

If you rely on animations, import the new BrowserAnimationsModule from the @ angular / platform browser / animations into the root NgModule. Without this code will be compiled and run, but the animation will cause an error. Import from @ angular / core was deprecated, use import from new package import {trigger, state, style, transition, animation} from '@ angular / animation' ;.

http://angularjs.blogspot.com/2017/03/angular-400-now-available.html

Answer 2

The ng-if directive handles only the positive case. For a negative case ( else ) use a separate block:

 <ul ng-if="!finished" id="time"> <li id='hour' class="chart" data-percent="100"><span>{{hour}} </span></li> <li id='min' class="chart" data-percent="100"><span>{{minute}}</span></li> <li id='second' class="chart" data-percent="100"><span>{{second}}</span></li> </ul> <ng-if="finished"> <h4 id='time'>DONE</h4> </ng-template> 

Answer 3

I do not see anything wrong with this code.

 <ng-container *ngIf="!loading;else preloader"> <p>Loaded stuff here!!!!!</p> </ng-container> <ng-template #preloader> <div class="progress"> <div class="indeterminate"></div> </div> </ng-template> 

I would make sure you are using Angular 4.0. Since the above posters are true that this is not supported in Angular 2.