Anuglar Material2 Autocomplete: bind to click in template

Question

im trying to implement an angular(4) material2 autocomplete where the user can add an item via a dialog if there is no result. Therefore i tried to add a link to the autocomplete template like this:

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displaySport">
   <md-option *ngFor="let option of options" [value]="option">
     {{ option.name }}
   </md-option>
   <div class="not-found" *ngIf="options.length === 0">
     <a (click)="openDialog()">Add new</a>
   </div>
</md-autocomplete>

I guess that the click event is catched by the autocomplete component because when i try to click on the link nothing happens :-(

Any idea howto implement this properly? Any help ist very much appreciated and thanks in advance.

Greetings, Freddy

Answer 1

While trying to get the plunker ready i found the issue and solution for my own question. It seems that there is a bug in material2 version beta.3. After upgrading to beta.5 the issue is gone. The code above works nice with material beta.5.

Plunker with broken version: http://embed.plnkr.co/jEmWJTEMWzyRnLjbIBev/