My primary application component communicates with its sub components using @Output decorated properties on the subcomponent. The output properties utilize an EventEmitter<>(). Typically, these properties emit a simple boolean or number. I want to directly bind this output to properties in the main application, but so far my attempts have failed.
Currently, my approach is as follows:
//In my sub-component:
@Output() subProperty = new EventEmitter<boolean>();
//In my main template:
<sub-component (subProperty)="setPropertyValue($event)"></subcomponent>
//In my main component (which I would like to avoid):
setPropertyValue(event) {
this.mainProperty = event;
}
I hoped to skip the function in my main component and bind directly to my property, but the following code does not work:
//In my sub-component:
@Output() subProperty = new EventEmitter<boolean>();
//In my main template:
<sub-component (subProperty)="mainProperty"></subcomponent>
Is there any way for me to eliminate the extra function in my main component?