Update angular to 4.0.0

shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html

@@ -4,7 +4,7 @@
                     [attr.height]="height"  [attr.width]="width"
                     [attr.fill]="fill"
 />
-<template [ngIf]="recording">
+<ng-template [ngIf]="recording">
     <svg:circle
             [@recording]="recordAnimation"
             (@recording.done)="onRecordingAnimationDone()"
@@ -13,8 +13,8 @@
             [attr.r]="10"
             [attr.fill]="'#c00'"
     ></svg:circle>
-</template>
-<template [ngIf]="!recording">
+</ng-template>
+<ng-template [ngIf]="!recording">
     <svg:g [ngSwitch]="labelType"
            [attr.font-size]="19"
            [attr.font-family]="'Helvetica'"
@@ -62,4 +62,4 @@
             <svg:g svg-mouse-key [mouseAction]="labelSource"></svg:g>
         </svg>
     </svg:g>
-</template>
+</ng-template>

shared/src/components/svg/wrap/svg-keyboard-wrap.component.html

@@ -1,4 +1,4 @@
-<template ngIf="layers">
+<ng-template [ngIf]="layers">
     <layers [class.disabled]="popoverShown" (select)="selectLayer($event.index)" [current]="currentLayer"></layers>
     <keyboard-slider [layers]="layers"
                      [currentLayer]="currentLayer"
@@ -22,4 +22,4 @@
             </p>
         </div>
     </div>
-</template>
+</ng-template>

shared/src/components/svg/wrap/svg-keyboard-wrap.component.ts

@@ -119,7 +119,8 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
         if (keymapChanges) {
             this.popoverShown = false;
             this.layers = this.keymap.layers;
-            if (keymapChanges.previousValue.abbreviation !== keymapChanges.currentValue.abbreviation) {
+            if (keymapChanges.isFirstChange() ||
+                keymapChanges.previousValue.abbreviation !== keymapChanges.currentValue.abbreviation) {
                 this.currentLayer = 0;
                 this.keybindAnimationEnabled = keymapChanges.isFirstChange();
             } else {