Describing my unique situation here, just in case someone encounters a similar issue.
I faced a problem where I was attempting to directly call the Output callback from HTML:
Child Component
...
@Output() isCategorySelected: EventEmitter<any> = new EventEmitter<any>();
Child Component HTML
<option *ngFor="let category of todoCategories" [value]="category"
[selected]="isCategorySelected(category)">{{category}}
</option>
Parent Component HTML
<app-child (isCategorySelected)="myCategorySelectorFunc($event)"></app-child>
Solution
To resolve this issue, I had to create another method within the Child component and trigger the output from there:
...
@Output() isCategorySelected: EventEmitter<any> = new EventEmitter<any>();
public onCategorySelected(category: string): void {
this.isCategorySelected.next(category);
}
Child Component HTML
<option *ngFor="let category of todoCategories" [value]="category"
[selected]="onCategorySelected(category)">{{category}}
</option>
OR
<option *ngFor="let category of todoCategories" [value]="category"
[selected]="isCategorySelected.next(category)">{{category}}
</option>
Conclusion
It is important to note that EventEmitter, BehaviorSubject, Subject cannot be directly called as methods from HTML.