src/app/editor/gamesystem-editor/template-specificator/template-specificator.component.html

@@ -1 +1,14 @@
-<p>template-specificator works!</p>
+<h1 mat-dialog-title>Specify Templatesystem</h1>
+<div mat-dialog-content>
+  <p>This will not affect the properties of the Templatesystem itself!</p>
+  <mat-form-field appearance="outline" class="long-form">
+    <mat-label>Select Templatesystem</mat-label>
+    <mat-select [formControl]="templateCtrl">
+      <mat-option *ngFor="let templateSystem of templateSystems" [value]="templateSystem">{{templateSystem.componentName}}</mat-option>
+    </mat-select>
+  </mat-form-field>
+</div>
+<div mat-dialog-actions align="end">
+  <button mat-stroked-button (click)="cancelSpecification()">Cancel</button>
+  <button mat-raised-button color="accent" [disabled]="templateCtrl.invalid" (click)="confirmSpecification()">Confirm</button>
+</div>

src/app/editor/gamesystem-editor/template-specificator/template-specificator.component.scss

@@ -0,0 +1,3 @@
+.long-form {
+  width: 100%;
+}

src/app/editor/gamesystem-editor/template-specificator/template-specificator.component.ts

@@ -1,4 +1,7 @@
-import { Component } from '@angular/core';
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {Gamesystem} from "../../../project/game-model/gamesystems/Gamesystem";
+import {FormControl, Validators} from "@angular/forms";
 
 @Component({
   selector: 'app-template-specificator',
@@ -7,4 +10,17 @@ import { Component } from '@angular/core';
 })
 export class TemplateSpecificatorComponent {
 
+  templateCtrl: FormControl = new FormControl('', [Validators.required])
+
+  constructor(private dialogRef: MatDialogRef<TemplateSpecificatorComponent>,
+              @Inject(MAT_DIALOG_DATA) public templateSystems: Gamesystem<any, any>[] = []) {
+  }
+
+  cancelSpecification() {
+    this.dialogRef.close()
+  }
+
+  confirmSpecification() {
+    this.dialogRef.close(this.templateCtrl.value)
+  }
 }