Consider a scenario where a component contains a basic dropdown in its template. Whenever the user chooses an option from the dropdown, the event-handler function onSelect() is triggered.
<select [value]="this.selectedCountryName"
(change)="onSelect()">
<option *ngFor="let country of this.countries">
{{country.name}}</option>
</select>
The corresponding event-handler function may look something like this:
public onSelect(): void {
console.log('User selected ' + this.selectedCountryName)
}
Alternatively, some implementations pass the $event object to the event-handler function like this:
<select [value]="this.selectedCountryName"
(change)="onSelect($event)">
<option *ngFor="let country of this.countries">
{{country.name}}</option>
</select>
In this case, you would reference the selected value from the $event object instead of directly accessing the component fields.
For more information, refer to the Angular documentation: https://angular.io/guide/user-input
Which approach do you consider better?