Does @Output decorator in Angular work strictly with click events only?

Issue

I’m trying to pass data from child to parent component with a variable value from child to parent, unfortunately no changes are being made in parent component. Any ideas whats going on? Or does @Output decorator strictly works only with events that come from clicks in child component? I also would expact that it doesnt matter if i use method for eventemitter or not, so for example setting emit for eventemitters from inside constructor or ngOnInit methods, i tried it and still doesnt work.

Child component:

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
selector: 'app-server',
templateUrl: './server.component.html',
styles: [
 `.online {
   color: white;
}


 `
]
})
export class ServerComponent {
serverId: number = 10;
serverStatus: string = 'offline';
serverName: 'Random server';

@Output() serverNameEmitter = new EventEmitter<string>();

constructor() {
    this.serverStatus = Math.random() > 0.5 ? 'online' : 'offline';

}

ngOnInit(): void {
    this.passServerName(this.serverName);
}

passServerName(serverName: string) {
    this.serverNameEmitter.emit(serverName);
}


getColor() {
    return this.serverStatus == 'online' ? 'green' : 'red';
}
getServerStatus() {
    return this.serverStatus;
}


}

Parent component

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

@Component({
  selector: 'app-servers',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css'],
})
export class ServersComponent implements OnInit {
allowNewServer = false;
serverCreationStatus = 'No server was created!';
serverNames = "";
serverStatus = false;
servers = [];

serverName = {
   name: "Test server"
};


constructor() {
  setTimeout(() => {
    this.allowNewServer = true;
  }, 2000);
}

ngOnInit(): void {}

onCreateServer() {
 this.serverStatus = true;
 this.servers.push(this.serverName.name);
 this.serverCreationStatus = 'Server has been created! Name is ' + this.serverName.name;
}

onUpdateServerName(event: Event) {
 this.serverNames = (event.target as HTMLInputElement).value;
}

changeServerName() {
 this.serverName.name = this.serverNames;
}

gettingServerName(serverName: string) {
  this.serverNames = serverName;
}
}

Parent component HTML

<label>Server Name</label>
<input type="text" class="form-control" (input)="onUpdateServerName($event)">
<!--<input type="text" class="form-control" [(ngModel)]="serverName.name">-->
<!--<p>{{serverName}}</p>-->
 <button class="btn btn-primary" [disabled]="!allowNewServer" 
(click)="onCreateServer()">Add Server</button>
<!--<p [innerText]="allowNewServer"></p>-->
<!--<p>{{serverCreationStatus}}</p>-->
<p>Here's {{ serverNames }}</p>
<p *ngIf="serverStatus; else noServer">Server was created, server name is {{ 
   serverName.name }}</p>
<ng-template #noServer>
<p>No server was created!</p>
</ng-template>
<button class="btn btn-primary" (click)="changeServerName()">Change server name</button>
<app-server *ngFor="let server of servers" 
(serverNameEmitter)="gettingServerName($event)"></app-server>

Solution

Ok, I have created a Stackblitz project with your code. But i don't understand something.... You set a new server name in the parent component. Then you can add a new server. But you never set the name to the child if it created. So the child emit the event (it works) and you set the serverNames to "Random server" always.

The only thing I saw: You got a ExpressionChangedAfterItHasBeenCheckedError if you emit the serverName in the child in onInit(). Simple trick: setTimeout.

But see the Stackblitz and play with it. If you have other question let me know.

Greetings, Flo

Answered By - Flo