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
+        });
     }
 
 }