Divide svg-keyboard into two components. One with popover and one without it.

src/components/svg-keyboard-popover.component.ts

@@ -0,0 +1,48 @@
+import { Component, OnInit, Input} from '@angular/core';
+
+import {Module} from '../../config-serializer/config-items/Module';
+import {SvgKeyboardComponent} from './svg-keyboard.component';
+import {PopoverComponent} from './popover/popover.component';
+
+@Component({
+    selector: 'svg-keyboard-popover',
+    template:
+    `
+        <svg-keyboard [moduleConfig]="moduleConfig"
+                    (keyClick)="onKeyClick($event.moduleId, $event.keyId)">
+        </svg-keyboard>
+        <popover *ngIf="popoverEnabled" (cancel)="hidePopover()"></popover>
+    `,
+    styles:
+    [`
+        :host {
+            display: flex;
+            width: 100%;
+            height: 100%;
+            position: relative;
+        }
+    `],
+    directives: [SvgKeyboardComponent, PopoverComponent]
+})
+export class SvgKeyboardPopoverComponent implements OnInit {
+    @Input() moduleConfig: Module[];
+
+    private popoverEnabled: boolean;
+
+    constructor() { }
+
+    ngOnInit() { }
+
+    onKeyClick(moduleId: number, keyId: number): void {
+        this.showPopover();
+    }
+
+    showPopover(): void {
+        this.popoverEnabled = true;
+    }
+
+    hidePopover(): void {
+        this.popoverEnabled = false;
+    }
+
+}

src/components/svg-keyboard.component.ts

@@ -1,9 +1,8 @@
-import { Component, OnInit, Input} from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
 
 import {Module} from '../../config-serializer/config-items/Module';
 import {SvgModule} from './svg-module.model';
 import {SvgModuleComponent} from './svg-module.component';
-import {PopoverComponent} from './popover/popover.component';
 import {DataProviderService} from '../services/data-provider.service';
 
 @Component({
@@ -21,7 +20,6 @@ import {DataProviderService} from '../services/data-provider.service';
                 />
             </svg:g>
         </svg>
-        <popover *ngIf="popoverEnabled" (cancel)="hidePopover()"></popover>
     `,
     styles:
     [`
@@ -32,13 +30,13 @@ import {DataProviderService} from '../services/data-provider.service';
             position: relative;
         }
     `],
-    directives: [SvgModuleComponent, PopoverComponent]
+    directives: [SvgModuleComponent]
 })
 export class SvgKeyboardComponent implements OnInit {
     @Input() moduleConfig: Module[];
+    @Output() keyClick = new EventEmitter();
 
     private modules: SvgModule[];
-    private popoverEnabled: boolean;
     private svgAttributes: { viewBox: string, transform: string, fill: string };
 
     constructor(private dps: DataProviderService) {
@@ -51,15 +49,10 @@ export class SvgKeyboardComponent implements OnInit {
     }
 
     onEditKeyActionRequest(moduleId: number, keyId: number): void {
-        this.showPopover();
-    }
-
-    showPopover(): void {
-        this.popoverEnabled = true;
-    }
-
-    hidePopover(): void {
-        this.popoverEnabled = false;
+        this.keyClick.emit({
+            moduleId,
+            keyId
+        });
     }
 
 }

src/main-app.component.scss

@@ -21,7 +21,7 @@ button {
     position: relative;
 }
 
-:host > div:last-child > svg-keyboard {
+:host > div:last-child > svg-keyboard-popover {
     width: 80%;
     position: absolute;
     left: 50%;

src/main-app.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, AfterViewInit, Renderer, ViewChildren, QueryList, El
 
 import {Layers} from '../config-serializer/config-items/Layers';
 
-import {SvgKeyboardComponent} from './components/svg-keyboard.component';
+import {SvgKeyboardPopoverComponent} from './components/svg-keyboard-popover.component';
 import {UhkConfigurationService} from './services/uhk-configuration.service';
 
 @Component({
@@ -24,22 +24,22 @@ import {UhkConfigurationService} from './services/uhk-configuration.service';
             </button>
         </div>
         <div>
-            <svg-keyboard *ngFor="let layer of layers.elements"
+            <svg-keyboard-popover *ngFor="let layer of layers.elements"
                             [moduleConfig]="layer.modules.elements"
                             (animationend)="onKeyboardAnimationEnd($event)"
                             hidden>
-            </svg-keyboard>
+            </svg-keyboard-popover>
         </div>
     `,
     styles: [require('./main-app.component.scss')],
-    directives: [SvgKeyboardComponent],
+    directives: [SvgKeyboardPopoverComponent],
     providers: [UhkConfigurationService]
 })
 export class MainAppComponent implements OnInit, AfterViewInit {
     @ViewChildren('baseButton,modButton,fnButton,mouseButton')
     buttonsQueryList: QueryList<ElementRef>;
 
-    @ViewChildren(SvgKeyboardComponent, { read: ElementRef })
+    @ViewChildren(SvgKeyboardPopoverComponent, { read: ElementRef })
     keyboardsQueryList: QueryList<ElementRef>;
 
     private buttons: ElementRef[];