Angular 2 ngIf Unexpected token #

Hi everyone i am learning angular2 now im workind with *ngIf

and i have this code

<div *ngIf='courses.length > 0 ; then #coursesList else #noCourses'>
</div>
<ng-template #coursesList>
  <h1>List of courses</h1>
</ng-template>
<ng-template #noCourses>
  <h2>No courses yet</h2> 
</ng-template>

      

        
        
        
      

    

And this is mine component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    title = 'app hello';

    courses=[];
}

      

        
        
        
      

    

My problem is that when I run the website I have this error:

Uncaught Error: Template parse errors:
Parser Error: Unexpected token # at column 27 in [courses.length > 0 ; then 
#coursesList else #noCourses] in ng:///AppModule/AppComponent.html@1:5 ("
<h1>Angular</h1>
<div [ERROR ->]*ngIf='courses.length > 0 ; then #coursesList else 
#noCourses'>
</div>
"): ng:///AppModule/AppComponent.html@1:5

      

        
        
        
      

    

I don't understand why I am following the guide, I do not want to use copy to copy because I need to know why this is happening.