Expected behavior When clicking the "Load more" button the loadMore() function is fired like with regular angular-material autocomplete component.

Actual behavior The loadMore() method is not fired

Resources (screenshots, code snippets etc.)

<div class="md-form">
      <input autocomplete="off" mdbInputDirective type="text" class="completer-input form-control mdb-autocomplete mb-0"
        [mdbValidation]="false" [(ngModel)]="searchText" #player [mdbAutoCompleter]="auto" id="player-autocomplete">
      <label for="player-autocomplete">Pick a player</label>
      <mdb-auto-completer #auto="mdbAutoCompleter" (select)="onPlayerSelect($event)">
        <mdb-option *ngFor="let option of results" [value]="option">
          <div class="d-flex flex-column">
            {{option.name}}
          </div>
        </mdb-option>
        <a href="#" (click)="loadMore()">Load more</a>
      </mdb-auto-completer>
    </div>

I've tried also making a directive to caputre the click like in example below

@Directive({
  selector: '[appLoadMore]'
})
export class LoadMoreDirective {

  @HostListener('click', ['$event'])
  clickEvent(event) {
    event.preventDefault();
    event.stopPropagation();
    console.log('Click from Host Element!');
  }
}

I've tried also attaching event listener to element in this directive.