EventEmitter вроде работает только для одного из параметров

Question

Angular newb ie здесь. По какой-то причине атрибут serverContents отображается как неопределенный в компоненте приложения. Есть идеи, что не так. Все компилируется нормально, но я не могу отобразить значение атрибута serverContents.

См. Ниже: cockpit.component. html:

<div class="row">
    <div class="col-xs-12">
      <p>Add new Servers or blueprints!</p>
      <label>Server Name</label>
      <!-- <input type="text" class="form-control" [(ngModel)]="newServerName"> -->
      <input type="text" class="form-control" #serverNameInput>
      <label>Server Content</label>
      <!-- <input type="text" class="form-control" [(ngModel)]="newServerContent"> -->
      <input type="text" class="form-control" #serverContentInput>
      <br>
      <button
        class="btn btn-primary"
        (click)="onAddServer(serverNameInput,serverContentInput)">Add Server</button>
      <button
        class="btn btn-primary"
        (click)="onAddBluePrint(serverNameInput,serverContentInput)">Add Server Blueprint</button>
    </div>
  </div>

cockpit.component.ts:

import { Component, OnInit, Output,EventEmitter } from '@angular/core';
import { ServerElementComponent } from '../server-element/server-element.component';

@Component({
  selector: 'app-cockpit',
  templateUrl: './cockpit.component.html',
  styleUrls: ['./cockpit.component.css']
})
export class CockpitComponent implements OnInit {

  @Output() serverCreated = new EventEmitter<{serverName: string,serverContent: string}>();
  @Output() bluePrintCreated = new EventEmitter<{serverName: string,serverContent: string}>();

  constructor() { }

  ngOnInit(): void {
  }
  onAddServer(nameInput: HTMLInputElement,contentInput: HTMLInputElement){
      this.serverCreated.emit({
      serverName: nameInput.value,
      serverContent: contentInput.value
    });
  }

  onAddBluePrint(nameInput: HTMLInputElement,contentInput: HTMLInputElement){
    this.bluePrintCreated.emit({
    serverName: nameInput.value,
    serverContent: contentInput.value
    });
  }
}

app.component. html

<div class="container">
  <app-cockpit
  (serverCreated) = "onServerAdded($event)"
  (bluePrintCreated) = "onBluePrintAdded($event)"></app-cockpit>
  <hr>
  <div class="row">
    <div class="col-xs-12">
      <app-server-element *ngFor ="let serverElement of serverElements" [srvElement]="serverElement">
        <p>
          <strong *ngIf="serverElement.type === 'server'" style="color: red">{{serverElement.content }}</strong>
          <em *ngIf="serverElement.type === 'blueprint'">{{ serverElement.content }}</em>
        </p>
      </app-server-element>
    </div>
  </div>
</div>

app.component.ts

import { Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  serverElements = [{type: 'server',name: 'Testserver',content: 'Just a test !'}];
    constructor(){
      }
    onServerAdded(serverCreated:{serverName: string,serverContents: string}){
    this.serverElements.push ({
    type: 'server',
    name: serverCreated.serverName,
    content: serverCreated.serverContents
      });
    }
    onBluePrintAdded(bluePrintCreated : {serverName: string,serverContents: string}){
    this.serverElements.push ({
    type: 'blueprint',
    name: bluePrintCreated.serverName,
    content: bluePrintCreated.serverContents
    });
  }
}