6

I keep getting the error

Can't bind to 'ngIfElse' since it isn't a known property of 'ul'.

I'm sure somewhere I am making a stupid mistake but 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>
Frederik Struck-Schøning
  • 12,981
  • 8
  • 59
  • 68
dimeji faluyi
  • 93
  • 2
  • 5
  • I don't see anything wrong with that code. I would make sure you are running Angular 4.0. As the above posters are correct in that this is not supported in angular 2. – user2258403 May 11 '17 at 12:28

2 Answers2

5

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

1: using 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: update your app 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 @angular/platform-browser/animations in your root NgModule. Without this, your code will compile and run, but animations will trigger an error. Imports from @angular/core were deprecated, use imports from the new package import { trigger, state, style, transition, animate } from '@angular/animations';.

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

Frederik Struck-Schøning
  • 12,981
  • 8
  • 59
  • 68
Tiep Phan
  • 12,386
  • 3
  • 38
  • 41
2

The ng-if directive only handles the positive case. For the negative case (the 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>
Frederik Struck-Schøning
  • 12,981
  • 8
  • 59
  • 68
Tim Biegeleisen
  • 502,043
  • 27
  • 286
  • 360
  • while angular version 2 doesn't support ng-if-else, but angular version 4 has this feature now. – Pengyy Apr 20 '17 at 01:57