I have the following Angular component:
import { Component, OnInit , EventEmitter , Output } from '@angular/core';
@Component({
selector: 'app-corkpit',
templateUrl: './corkpit.component.html',
styleUrls: ['./corkpit.component.css']
})
export class CorkpitComponent implements OnInit {
/*
@Output is used when you need to emit an event from a child
component to the parent (Opp. to what @Input does in the server component !)
*/
@Output() serverCreated = new EventEmitter<{ serverName: string , serverContent: string }>();
@Output() blueprintCreated = new EventEmitter<{ serverName: string , serverContent: string }>();
newServerName = '';
newServerContent = '';
constructor() { }
ngOnInit() {
}
onAddServer() {
this.serverCreated.emit({
serverName : this.newServerName ,
serverContent: this.newServerContent
})
}
onAddBlueprint() {
this.blueprintCreated.emit({
serverName : this.newServerName ,
serverContent: this.newServerContent
})
}
}
As you can see I have two function in which I am emitting events, like so:
onAddServer() {
this.serverCreated.emit({
serverName : this.newServerName ,
serverContent: this.newServerContent
})
}
onAddBlueprint() {
this.blueprintCreated.emit({
serverName : this.newServerName ,
serverContent: this.newServerContent
})
}
Now in the template file of the parent component, I have the following markup:
<app-corkpit
(serverCreated)="onServerAdded($event)"
(blueprintCreated)="onBlueprintAdded($event)"
></app-corkpit>
Here you see that on fire of the serverCreated event, the following function is called:
onServerAdded($event)
The function has a variable passed to it $event
now if I change this $event
to say $data
my app breaks, so my question is can this $event
variable not be renames to anything that I like? Just like in jQuery if a function accepts an event as an argument, it can be either event
or just e
or pretty much anything that I like.