Update to angular2-rc.2

src/components/keys/svg-keyboard-key.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, OnChanges, SimpleChange } from '@angular/core';
-import {NgSwitch, NgSwitchWhen} from '@angular/common';
+import {NgSwitch, NgSwitchCase} from '@angular/common';
 
 import {KeyAction} from '../../../config-serializer/config-items/KeyAction';
 import {KeystrokeAction} from '../../../config-serializer/config-items/KeystrokeAction';
@@ -37,28 +37,28 @@ enum LabelTypes {
                 [attr.font-family]="'Helvetica'"
                 [attr.fill]="'white'"
                 style="dominant-baseline: central">
-            <svg:g svg-one-line-text-key *ngSwitchWhen="enumLabelTypes.OneLineText"
+            <svg:g svg-one-line-text-key *ngSwitchCase="enumLabelTypes.OneLineText"
                     [height]="height"
                     [width]="width"
                     [text]="labelSource">
             </svg:g>
-            <svg:g svg-two-line-text-key *ngSwitchWhen="enumLabelTypes.TwoLineText"
+            <svg:g svg-two-line-text-key *ngSwitchCase="enumLabelTypes.TwoLineText"
                     [height]="height"
                     [width]="width"
                     [texts]="labelSource">
             </svg:g>
-            <svg:g svg-text-icon-key *ngSwitchWhen="enumLabelTypes.TextIcon"
+            <svg:g svg-text-icon-key *ngSwitchCase="enumLabelTypes.TextIcon"
                     [height]="height"
                     [width]="width"
                     [text]="labelSource.text"
                     [icon]="labelSource.icon">
             </svg:g>
-            <svg:g svg-single-icon-key *ngSwitchWhen="enumLabelTypes.SingleIcon"
+            <svg:g svg-single-icon-key *ngSwitchCase="enumLabelTypes.SingleIcon"
                     [height]="height"
                     [width]="width"
                     [icon]="labelSource">
             </svg:g>
-            <svg:g svg-switch-keymap-key *ngSwitchWhen="enumLabelTypes.SwitchKeymap"
+            <svg:g svg-switch-keymap-key *ngSwitchCase="enumLabelTypes.SwitchKeymap"
                     [height]="height"
                     [width]="width"
                     [abbreviation]="labelSource">
@@ -68,7 +68,7 @@ enum LabelTypes {
     directives:
     [
         NgSwitch,
-        NgSwitchWhen,
+        NgSwitchCase,
         SvgOneLineTextKeyComponent,
         SvgTwoLineTextKeyComponent,
         SvgSingleIconKeyComponent,

src/components/popover/popover.component.ts

@@ -12,7 +12,7 @@ import {
     ChangeDetectorRef
 } from '@angular/core';
 
-import {NgSwitch, NgSwitchWhen} from '@angular/common';
+import {NgSwitch, NgSwitchCase} from '@angular/common';
 
 import {KeyAction} from '../../../config-serializer/config-items/KeyAction';
 
@@ -74,12 +74,12 @@ import {KeyActionSaver} from './key-action-saver';
                 </div>
             </div>
             <div class="row" [ngSwitch]="activeListItemIndex">
-                <keypress-tab #tab *ngSwitchWhen="0" class="popover-content"></keypress-tab>
-                <layer-tab #tab *ngSwitchWhen="1" class="popover-content"></layer-tab>
-                <mouse-tab #tab *ngSwitchWhen="2" class="popover-content"></mouse-tab>
-                <macro-tab #tab *ngSwitchWhen="3" class="popover-content"></macro-tab>
-                <keymap-tab #tab *ngSwitchWhen="4" class="popover-content"></keymap-tab>
-                <none-tab #tab *ngSwitchWhen="5" class="popover-content"></none-tab>
+                <keypress-tab #tab *ngSwitchCase="0" class="popover-content"></keypress-tab>
+                <layer-tab #tab *ngSwitchCase="1" class="popover-content"></layer-tab>
+                <mouse-tab #tab *ngSwitchCase="2" class="popover-content"></mouse-tab>
+                <macro-tab #tab *ngSwitchCase="3" class="popover-content"></macro-tab>
+                <keymap-tab #tab *ngSwitchCase="4" class="popover-content"></keymap-tab>
+                <none-tab #tab *ngSwitchCase="5" class="popover-content"></none-tab>
             </div>
             <div class="row">
                 <div class="popover-action">
@@ -94,7 +94,7 @@ import {KeyActionSaver} from './key-action-saver';
     directives:
     [
         NgSwitch,
-        NgSwitchWhen,
+        NgSwitchCase,
         KeypressTabComponent,
         LayerTabComponent,
         MouseTabComponent,

src/components/popover/tab/layer-tab.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
-import {NgSwitch, NgSwitchWhen, NgSwitchDefault } from '@angular/common';
+import {NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
 
 import { LayerName, SwitchLayerAction } from '../../../../config-serializer/config-items/SwitchLayerAction';
 import { KeyActionSaver } from '../key-action-saver';
@@ -17,12 +17,12 @@ import {OptionData} from 'ng2-select2/dist/select2';
         <span>the</span>
         <select2 [data]="layerData" (valueChanged)="layerChanged($event)"></select2>
         <span [ngSwitch]="toggle">
-             <template ngSwitchWhen="true">layer by pressing this key.</template>
+             <template ngSwitchCase="true">layer by pressing this key.</template>
              <template ngSwitchDefault="false">layer by holding this key.</template>
         </span>
     `,
     styles: [require('./layer-tab.component.scss')],
-    directives: [SELECT2_DIRECTIVES, NgSwitch, NgSwitchWhen, NgSwitchDefault]
+    directives: [SELECT2_DIRECTIVES, NgSwitch, NgSwitchCase, NgSwitchDefault]
 })
 export class LayerTabComponent implements OnInit, KeyActionSaver {
     private toggle: boolean;

src/components/popover/tab/macro-item.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit, OnChanges, Input } from '@angular/core';
-import { NgSwitch, NgSwitchWhen} from '@angular/common';
 
 import {MacroAction} from '../../../../config-serializer/config-items/MacroAction';
 import {DelayMacroAction} from '../../../../config-serializer/config-items/DelayMacroAction';
@@ -32,7 +31,7 @@ import {KeyModifiers}  from '../../../../config-serializer/config-items/KeyModif
          <icon *ngIf="editable" name="pencil"></icon>
     `,
     styles: [require('./macro-item.component.scss')],
-    directives: [NgSwitch, NgSwitchWhen, IconComponent]
+    directives: [IconComponent]
 })
 export class MacroItemComponent implements OnInit, OnChanges {
 

src/components/popover/tab/mouse-tab.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Renderer} from '@angular/core';
-import {NgSwitch, NgSwitchWhen, NgSwitchDefault} from '@angular/common';
+import {NgSwitch, NgSwitchCase, NgSwitchDefault} from '@angular/common';
 
 import { KeyActionSaver } from '../key-action-saver';
 import {MouseAction, MouseActionParam} from '../../../../config-serializer/config-items/MouseAction';
@@ -18,7 +18,7 @@ import {MouseAction, MouseActionParam} from '../../../../config-serializer/confi
             </ul>
         </div>
         <div class="details col-sm-8" [ngSwitch]="selectedIndex">
-            <div *ngSwitchWhen="0" class="mouse__config mouse__config--move text-center">
+            <div *ngSwitchCase="0" class="mouse__config mouse__config--move text-center">
                 <div class="row">
                     <button type="button" class="btn btn-default btn-lg"
                             (click)="onMouseActionClick($event.target, MouseActionParam.moveUp)">
@@ -45,7 +45,7 @@ import {MouseAction, MouseActionParam} from '../../../../config-serializer/confi
                     </button>
                 </div>
             </div>
-            <div *ngSwitchWhen="1" class="mouse__config mouse__config--scroll text-center">
+            <div *ngSwitchCase="1" class="mouse__config mouse__config--scroll text-center">
                 <div class="row">
                     <button type="button" class="btn btn-default btn-lg"
                             (click)="onMouseActionClick($event.target, MouseActionParam.scrollUp)">
@@ -72,7 +72,7 @@ import {MouseAction, MouseActionParam} from '../../../../config-serializer/confi
                     </button>
                 </div>
             </div>
-            <div *ngSwitchWhen="2" class="mouse__config mouse__config--click">
+            <div *ngSwitchCase="2" class="mouse__config mouse__config--click">
                 <div class="btn-group col-xs-12" role="group">
                     <button type="button" class="btn btn-default col-xs-4"
                             (click)="onMouseActionClick($event.target, MouseActionParam.leftClick)">Left</button>
@@ -82,7 +82,7 @@ import {MouseAction, MouseActionParam} from '../../../../config-serializer/confi
                             (click)="onMouseActionClick($event.target, MouseActionParam.rightClick)">Right</button>
                 </div>
             </div>
-            <div *ngSwitchWhen="3" class="mouse__config mouse__config--speed text-center">
+            <div *ngSwitchCase="3" class="mouse__config mouse__config--speed text-center">
                 <div class="help-text--mouse-speed text-left">
                     <p>Press this key along with mouse movement/scrolling to accelerate/decelerate the speed of the action.</p>
                     <p>You can set the multiplier in <a href="#" title="link to the setting">link to setting</a>.</p>
@@ -99,7 +99,7 @@ import {MouseAction, MouseActionParam} from '../../../../config-serializer/confi
         </div>
     `,
     styles: [require('./mouse-tab.component.scss')],
-    directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
+    directives: [NgSwitch, NgSwitchCase, NgSwitchDefault]
 })
 export class MouseTabComponent implements OnInit, KeyActionSaver {
     private mouseActionParam: MouseActionParam;

src/components/popover/widgets/icon.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { NgSwitch, NgSwitchWhen } from '@angular/common';
+import { NgSwitch, NgSwitchCase } from '@angular/common';
 
 @Component({
     moduleId: module.id,
@@ -7,16 +7,16 @@ import { NgSwitch, NgSwitchWhen } from '@angular/common';
     template:
     `
         <div [ngSwitch]="name">
-            <span *ngSwitchWhen="'option-vertical'" class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
-            <i *ngSwitchWhen="'square'" class="fa fa-square"></i>
-            <i *ngSwitchWhen="'mouse-pointer'" class="fa fa-mouse-pointer"></i>
-            <i *ngSwitchWhen="'clock'" class="fa fa-clock-o"></i>
-            <i *ngSwitchWhen="'trash'" class="glyphicon glyphicon-trash action--trash"></i>
-            <i *ngSwitchWhen="'pencil'" class="glyphicon glyphicon-pencil action--edit"></i>
-            <i *ngSwitchWhen="'question-circle'" class ="fa fa-question-circle"></i>
+            <span *ngSwitchCase="'option-vertical'" class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
+            <i *ngSwitchCase="'square'" class="fa fa-square"></i>
+            <i *ngSwitchCase="'mouse-pointer'" class="fa fa-mouse-pointer"></i>
+            <i *ngSwitchCase="'clock'" class="fa fa-clock-o"></i>
+            <i *ngSwitchCase="'trash'" class="glyphicon glyphicon-trash action--trash"></i>
+            <i *ngSwitchCase="'pencil'" class="glyphicon glyphicon-pencil action--edit"></i>
+            <i *ngSwitchCase="'question-circle'" class ="fa fa-question-circle"></i>
         </div>
     `,
-    directives: [NgSwitch, NgSwitchWhen],
+    directives: [NgSwitch, NgSwitchCase],
     styles: [require('./icon.component.scss')]
 })
 export class IconComponent implements OnInit {