Revised after components

app/application.ts

@@ -4,7 +4,7 @@ import {UserService} from './services/user.service';
 import {KlassService} from './services/klass.service';
 import {FooterComponent} from './components/footer.component';
 import {ContentComponent} from './components/content.component';
-import {HomeComponent} from './components/home.component';
+import {KlassesComponent} from './components/klasses.component';
 import {KlassComponent} from './components/klass.component';
 
 @Component({

app/components/content.component.ts

@@ -1,7 +1,7 @@
 import {Component} from 'angular2/core';
 import {HeaderComponent} from './header.component';
-import {LoginFormComponent} from './login-form.component';
-import {HomeComponent} from './home.component';
+import {LoginComponent} from './login.component';
+import {KlassesComponent} from './klasses.component';
 import {KlassComponent} from './klass.component';
 import {UserService} from '../services/user.service';
 import {User} from '../models/user';
@@ -14,21 +14,33 @@ import {Klass} from '../models/Klass';
     <div class="content container">
       <div class="row">
         <div class="twelve columns">
-          <main>
-            <login-form *ngIf="!currentUser" (loggedIn)="whenLoggedIn($event)"></login-form>
-            <home *ngIf="currentUser && !currentClass" (classSelected)="whenClassSelected($event)"></home>
-            <klass *ngIf="currentUser && currentClass" [klass]="currentClass" (classUnselected)="whenClassUnselected()"></klass>
+          <main [ngSwitch]="getTargetPage()">
+            <login   *ngSwitchWhen="'login'" (loggedIn)="whenLoggedIn($event)"></login>
+            <klasses *ngSwitchWhen="'klasses'" (classSelected)="whenClassSelected($event)"></klasses>
+            <klass   *ngSwitchWhen="'klass'" [klass]="currentClass" (classUnselected)="whenClassUnselected()"></klass>
           </main>
         </div>
       </div>
     </div>
     `,
-  directives:[HeaderComponent, LoginFormComponent, HomeComponent, KlassComponent]
+  directives:[HeaderComponent, LoginComponent, KlassesComponent, KlassComponent]
 })
 export class ContentComponent{
   currentUser: User;
   currentClass: Klass;
 
+  getTargetPage(){
+    if(!this.currentUser){
+      return 'login';
+    } else {
+      if(!this.currentClass){
+        return 'klasses'
+      }else{
+        return 'klass'
+      }
+    }
+  }
+
   whenLoggedIn(user){
     this.currentUser = user;
   }

app/components/home.component.ts → app/components/klasses.component.ts

@@ -3,7 +3,7 @@ import {KlassService} from '../services/klass.service';
 import {Klass} from '../models/klass';
 
 @Component({
-  selector: 'home',
+  selector: 'klasses',
   template: `
     <div *ngFor="#klass of klassService.getAvailableClasses()">
       <img [src]='klass.poster' class="u-pull-left"/>
@@ -14,7 +14,7 @@ import {Klass} from '../models/klass';
     </div>
   `
 })
-export class HomeComponent{
+export class KlassesComponent{
   @Output() classSelected = new EventEmitter();
   constructor(private klassService: KlassService) {}
 

app/components/login-form.component.ts → app/components/login.component.ts

@@ -2,10 +2,10 @@ import {Component, Output, EventEmitter} from 'angular2/core';
 import {UserService} from '../services/user.service';
 
 @Component({
-  selector: 'login-form',
-  templateUrl: 'app/templates/login-form.component.html'
+  selector: 'login',
+  templateUrl: 'app/templates/login.component.html'
 })
-export class LoginFormComponent{
+export class LoginComponent{
   @Output() loggedIn = new EventEmitter();
   constructor(private _userService: UserService) {}