带有父子的角度输出在按钮中不起作用

I\'m passing a button event from the child to the parent, but when I click the button, nothing happens.

This is the child code

product-item.component.html

 <button (click)=\'handleShowDetail()\' class=\"product_buttonAdd\">

product-item.component.ts

 @Input()
  productItem!: Product;

  @Output()
  showDetail: EventEmitter<string>=new EventEmitter()
handleShowDetail(){
    
    this.showDetail.emit(this.productItem.sku)

 }

This is the code where the product-item is contained

product-list.component.html

<div class=\"header__searchResultsContainer\">
  <div
    class=\"header__searchResults\"
   
  >
    <lpr-product-item
    
    (showDetail)=\"handleShowDetail($event)\"
    ></lpr-product-item>
  </div>
</div> 

product-list.component.ts

 @Output()
  showDetail: EventEmitter<string>=new EventEmitter()
handleShowDetail(sku: string){
    this.showDetail.emit(sku)

  } 

This is the parent who should activate the navigate and target the product based on its sku

product-container.component.html

<div class=\"product_container\">
  <div><lpr-products-list 
        (showDetail)=\"handleShowDetail($event)\"
    
    ></lpr-products-list></div>
  <div></div>
</div>
 

product-container.component.ts

 handleShowDetail(sku: string){
    this.router.navigate([ \'/product-details\' ])
  }

When I click on the button, the user should be redirected to a product detail, but nothing happens