Merge with different approach

src/app/components/project-map/node-select-interface/node-select-interface.component.html

@@ -0,0 +1,9 @@
+<div class="context-menu" [style.left]="leftPosition" [style.top]="topPosition" *ngIf="node">
+  <span [matMenuTriggerFor]="selectInterfaceMenu"></span>
+  <mat-menu #selectInterfaceMenu="matMenu">
+      <button mat-menu-item *ngFor="let port of node.ports" (click)="chooseInterface(port)">
+        <mat-icon>add_circle_outline</mat-icon>
+        <span>{{ port.name }}</span>
+      </button>
+  </mat-menu>
+</div>

src/app/components/project-map/node-select-interface/node-select-interface.component.scss

@@ -0,0 +1,3 @@
+.context-menu {
+  position: absolute;
+}

src/app/components/project-map/node-select-interface/node-select-interface.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NodeSelectInterfaceComponent } from './node-select-interface.component';
+
+describe('NodeSelectInterfaceComponent', () => {
+  let component: NodeSelectInterfaceComponent;
+  let fixture: ComponentFixture<NodeSelectInterfaceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NodeSelectInterfaceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NodeSelectInterfaceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  // it('should create', () => {
+  //   expect(component).toBeTruthy();
+  // });
+});

src/app/components/project-map/node-select-interface/node-select-interface.component.ts

@@ -0,0 +1,48 @@
+import {ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {MatMenuTrigger} from "@angular/material";
+import {DomSanitizer} from "@angular/platform-browser";
+import {Node} from "../../../cartography/models/node";
+import {Port} from "../../../models/port";
+
+
+@Component({
+  selector: 'app-node-select-interface',
+  templateUrl: './node-select-interface.component.html',
+  styleUrls: ['./node-select-interface.component.scss']
+})
+export class NodeSelectInterfaceComponent implements OnInit {
+  @Output() onChooseInterface = new EventEmitter<any>();
+
+  @ViewChild(MatMenuTrigger) contextMenu: MatMenuTrigger;
+
+  private topPosition;
+  private leftPosition;
+  public node: Node;
+
+  constructor(
+    private sanitizer: DomSanitizer,
+    private changeDetector: ChangeDetectorRef) {}
+
+  ngOnInit() {
+    this.setPosition(0, 0);
+  }
+
+  public setPosition(top: number, left: number) {
+    this.topPosition = this.sanitizer.bypassSecurityTrustStyle(top + "px");
+    this.leftPosition = this.sanitizer.bypassSecurityTrustStyle(left + "px");
+    this.changeDetector.detectChanges();
+  }
+
+  public open(node: Node, top: number, left: number) {
+    this.node = node;
+    this.setPosition(top, left);
+    this.contextMenu.openMenu();
+  }
+
+  public chooseInterface(port: Port) {
+    this.onChooseInterface.emit({
+      'node': this.node,
+      'port': port
+    });
+  }
+}