Angular v16 ERROR TypeError: Cannot read properties of undefined (reading 'value')

Question

I am trying to get the value of tag

<input type="radio" name="filter" value="all" [(ngModel)]="selectedFilterRadioButton"
        (change)="  onSelectedFilterRadioButtonChanged()" />
    <span>{{'All ('+all+')'}}</span>

    <input type="radio" name="filter" value="true" [(ngModel)]="selectedFilterRadioButton"
        (change)="onSelectedFilterRadioButtonChanged()" />
    <span>{{'In Stock ('+inStock+')'}}</span>

    <input type="radio" name="filter" value="false" [(ngModel)]="selectedFilterRadioButton"
        (change)="onSelectedFilterRadioButtonChanged()" />
    <span>{{'Out of Stock ('+outOfStock+')'}}</span>

Reading it in component.ts file

// Keeping track of the selected filter radio button in child component

  selectedFilterRadioButton: string = 'all';

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

    onSelectedFilterRadioButtonChanged() {
// Show the value when selected the radio button in the console.
    console.log(this.selectedFilterRadioButton);

    this.selectedFilterRadioButtonChanged.emit(this.selectedFilterRadioButton);
    console.log(this.selectedFilterRadioButtonChanged);
  }

Initial the value it should take is 'all'

But while emitting the event, it show undefined value error

filter.component.ts:29 

ERROR TypeError: Cannot read properties of undefined (reading 'value')                                                                                                             
    at _ProductListComponent.onFilterChange (product-list.component.ts:614:51)
    at ProductListComponent_Template_app_filter_selectedFilterRadioButtonChanged_0_listener (product-list.component.html:2:41)
    at executeListenerWithErrorHandling (core.mjs:25105:16)
    at Object.wrapListenerIn_markDirtyAndPreventDefault [as next] (core.mjs:25139:22)
    at ConsumerObserver2.next (Subscriber.js:96:33)
    at Subscriber2._next (Subscriber.js:63:26)
    at Subscriber2.next (Subscriber.js:34:18)
    at Subject.js:41:34
    at errorContext (errorContext.js:19:9)
    at Subject2.next (Subject.js:31:9)

I am trying to emit the event into the parent component by using @Output() Decorator. Whenever the radio button is selected it should send the value and emit it.