Why is my Parent Target Method not being executed?

Question

I have child and parent components. child - search-exercise-search.ts + html parent - search-exercise-right_boc.ts + html

the child part works the way i want it to, it takes and input and queries my data base and returns an array of objects. i confirmed that i get the data i want with a console.log

I added an output with EventEmmitter so that i can move this data to my parent component:

child.ts:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { WebService } from 'src/app/web.service';

@Component({
  selector: 'app-search-exercise-search',
  templateUrl: './search-exercise-search.component.html',
  styleUrls: ['./search-exercise-search.component.css'],
})
export class SearchExerciseSearchComponent {
  @Output() searchDataEmitter: EventEmitter<any> = new EventEmitter();
  constructor(public webService: WebService) {}
  searchResults: any;
  ngOnInit(): void {}

  getSearchTerm() {
    const input = document.getElementById('search_term') as HTMLInputElement;
    const searchTerm = input.value;

    // Subscribe to the Observable to get the data
    this.webService.searchExercises(searchTerm).subscribe(
      (data) => {
        // Handle the data here
        this.searchResults = data;
        console.log(this.searchResults);
        this.searchDataEmitter.emit(this.searchResults);
      },
      (error) => {
        // Handle errors if any
        console.error('Error occurred:', error);
      }
    );
  }
}

As far as i understand, i need to add the child component to the html of the parent component and include something that points to a method in my parent component.

parent.html

<app-search-exercise-search
  >(searchDataEmitter)="SearchDataHere($event)"</app-search-exercise-search>

the SearchDataHere() method is in my parent.ts

Parent.ts:

import { Component, OnInit, Input } from '@angular/core';
import { WebService } from 'src/app/web.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-search-exercise-right-box',
  templateUrl: './search-exercise-right-box.component.html',
  styleUrls: ['./search-exercise-right-box.component.css'],
})
export class SearchExerciseRightBoxComponent implements OnInit {
  @Input() ExerciseList: any = [];
  searchResults: any;
  constructor(public webService: WebService) {}

  ngOnInit(): void {
    console.log('balls');
  }

  SearchDataHere(data: any) {
    console.log('test');
    // Handle the emitted data from the child component
    this.searchResults = data;
    console.log('Received data from child component:', this.searchResults);

    // You can now use 'data' in your parent component
  }
}

when i click the button that runs the getSearchTerm() method and should emit my data, the SearchDataHere() method is not executed. even the console.log wont show.

What am i doing wrong here? I would appreciate the help

I tried checking for typos, made sure everything that needed to be spelt the same was spelt the same. i did notice that when i Ctrl click on the SearchDataHere() method in the parent html that it did not lead to the method in the ts.