Angular $event undefined for some clicks

I am not able to get the $event value on button click. The irony is it shows at one button click and not other.

Component HTML

<ng-template ngFor let-item="$implicit" [ngForOf]="eventDetails.eventProducts" let-i="index">
          <div class="kt-section kt-section--space-lg">
              <div class="kt-section__heading">
                <h3>{{ item.productParentTitle }}</h3>
              </div>


              <div class="kt-section__content text-center">
                <div class="row">
                  <div class="center-cont">
                    <div class="col-lg-8 text-left">
                        <div class="kt-cont-center">
                          <p class="pass-count">
                            {{item.productTitle}}
                          </p>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="kt-cont-center">
                            <span class="pass-price">{{item.productPrice}} AED</span>
                        </div>

                    </div>
                    <div class="col-lg-2">
                        <div class="kt-cont-center text-right">
                            <button type="button" class="btn btn-success" (click)="selectProduct($event)">
                              Select
                            </button>
                          </div>

                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="col-lg-12">
                      <ngb-accordion class="accordion-light" [closeOthers]="true">
                          <ngb-panel id="pass1" ngbPanelTitle>
                            <ng-template ngbPanelTitle>
                                <i class="fa fa-angle-down" aria-hidden="true"></i>
                            </ng-template>
                            <ng-template ngbPanelContent>
                              <span class="text-left">
                                <div class="tab-cont-wrap">
                                    <div class="row">
                                      <div class="col-sm-8">
                                        <p>
                                          {{ item.accordionDetails.content }}     
                                        </p>
                                      </div>
                                      <div class="col-sm-4">
                                        <div class="outside-price">
                                          <h5>outside price 1900 <span class="currency">aed</span></h5>
                                        </div>
                                      </div>
                                    </div>
                                </div>
                              </span>
                            </ng-template>
                          </ngb-panel>
                        </ngb-accordion>
                  </div>
                </div>

                <div class="kt-separator kt-separator--border-2x separator-margin-top-0"></div>

              </div>
              <div class="kt-section__content text-center">
                  <div class="row">
                    <div class="center-cont">
                      <div class="col-lg-8 text-left">
                          <div class="kt-cont-center">
                            <p class="pass-count">
                              {{item.productTitle}}
                            </p>
                          </div>
                      </div>
                      <div class="col-lg-2">
                          <div class="kt-cont-center">
                              <span class="pass-price">{{item.productPrice}} AED</span>
                          </div>

                      </div>
                      <div class="col-lg-2">
                          <div class="kt-cont-center text-right">
                              <button type="button" class="btn btn-success" (click)="selectProduct(item)">
                                Select
                              </button>
                            </div>

                      </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-lg-12">
                        <ngb-accordion class="accordion-light" [closeOthers]="true">
                            <ngb-panel id="pass1" ngbPanelTitle>
                              <ng-template ngbPanelTitle>
                                  <i class="fa fa-angle-down" aria-hidden="true"></i>
                              </ng-template>
                              <ng-template ngbPanelContent>
                                <span class="text-left">
                                  <p>
                                      {{ item.accordionDetails.content }}     
                                  </p>
                                </span>
                              </ng-template>
                            </ngb-panel>
                          </ngb-accordion>
                    </div>
                  </div>

                  <div class="kt-separator kt-separator--border-2x separator-margin-top-0"></div>

              </div>
          </div>
        </ng-template>

Component TS method

selectProduct(event:any): void {
    // console.log(event.target.closest('.center-cont').className);
    // event.target.closest('.center-cont').className += ' selected'; 
    // event.target.className += ' selected';
    this.rendrer.addClass(event.target, 'selected');
    this.rendrer.addClass(event.target.parentElement.parentElement.parentElement, 'selected');

  }

End Result

If I click on 1st select button event is defined but clicking on the second button event comes undefined.

Can anyone help me out on this? I have searched through and couldn't find anything.

I can see that on the first click it's selectProduct($event) called, where it's selectProduct(item) on the second.

Maybe you should add the event type cast if this is what you need :

selectProduct(event: Event): void {
    // console.log(event);    
}