Why my Angular @Output not working with two output child component

I'm trying to do child to parent communication with @Output event emitter but is no working here is the child component

@Component({
    selector: 'app-search',
    templateUrl: './search.component.html'
})
export class SearchComponent implements OnInit {

    songsList: any = [];
    artistsList: any = [];
    backArtistsList: any = [];
    backSongsList: any = [];
    searchValue: any = "";
    queryField: FormControl = new FormControl();
    searchSubscription: Subscription;

  @Output() hideResultEvent = new EventEmitter();
  @Output() showResultEvent = new EventEmitter();


  constructor(@Inject(DOCUMENT) private document: Document,
                private router: Router,
                private songsConfigService: SongsConfigService,
                private apiService: ApiService,
                private albumsConfigService: AlbumsConfigService,
                private artistsConfigService: ArtistsConfigService,
                private searchService: SearchService,
                private sanitizer: DomSanitizer) {

      this.songsConfigService.getTop().subscribe((res) => {
        for (const k in res) {
          res[k].cover = this.sanitizer.bypassSecurityTrustUrl(String(res[k].cover));
          res[k].cover_art_url = this.songsConfigService.loadCoverUrl(res[k]._id).url;
          this.songsList.push(res[k]);
        };
        this.songsList = this.songsList.slice(0, 3);
      });

      this.artistsConfigService.getArtists().subscribe(
        (res) => {
          this.artistsList = res;
          this.artistsList = this.artistsList.slice(0, 6);
          this.backArtistsList = this.artistsList;
          this.backSongsList = this.songsList;
        }
      );

    }

    ngOnInit() {
      this.searchSubscription = this.searchService.searchStatus.subscribe((value) => {
        console.log(value)
        if (value) {
          this.hideSearchResults();
        }
      });
      this.queryField.valueChanges
        .subscribe( (result) => {
          if(result !== ""){
            this.apiService.getuserByArtistName(result).subscribe((res) => {
              this.artistsList = res;
            });
            this.songsConfigService.getSongByTitle(result).subscribe((res) => {
              this.songsList = res;
            });
          }else{
            this.artistsList = this.backArtistsList;
            this.songsList = this.backSongsList;
          }});
    }

    search(e){
    console.log(e);
    console.log(this.searchValue)
    }
  showSearchResults() {
    this.showResultEvent.next("ok");
    this.document.body.classList.add(Config.classes.openSearch);
  }

  hideSearchResults() {
    this.hideResultEvent.next("ok");
    this.document.body.classList.remove(Config.classes.openSearch);
  }

    goToPage(page) {
        page = '/' + page;
        this.searchService.hideSearchResult();
        this.router.navigate([page]);
    }

  ngOnDestroy(){
      this.searchSubscription.unsubscribe();
    }

}

here is the html :

<div id="searchForm">
    <app-search (hideResultEvent)="hideSearchResults($event)" (showResultEvent)="showSearchResults($event)"></app-search>
</div>

I follow some stackOverFlow post and i think my code is good. I use two output on my child component (searchComponent) and i called the event on the parent component (HeaderComponent)

the problem is : the hideSearchResults(e) function is never called.