Click through an a tag in Angular 2

Question

I'm using angular 2 material. Since it not done yet..i need to build some component to use... and then i faced this problem.

My idea is create an autocomplete that after eveytime i click to choose an option..it's create a new chip. I'm using an chip in chip List as an input :)) like so:

<md-input-container class="personnel-class-full-width" <floatPlaceholder="always">
          <md-chip-list #chipList>
            <md-chip class="personnel-form-chip chipContent" *ngFor="let chip of selectedProperties" disabled (keypress)="chipKeyPress($event,chip)">
              {{ chip }} <a class="personnel-form-chip-deleteButton" (click)="removeSelectedClassProperties(chip);"><b style="font-size: 13px">&nbsp;X</b></a>
            </md-chip>
            <md-chip class="personnel-form-chip searchChips">
              <input mdInput #autoCompleteFilter placeholder="Class Properties" 
                [(ngModel)]="autoCompleteFilterText" (keypress)="addChip($event);"
                [mdAutocomplete]="auto" [formControl]="classPropertiesCtrl"> 
            </md-chip>
          </md-chip-list>
        </md-input-container>

This is my autocomplete selector

The problem is..everytime i click [x] button to delete the chip..i think it click through it and click to an input behind to @@.

Plus: Do you know how to clear the text in Input after select an option in autocomplete :D..i use setInterval..but it's seem not good as all :D

Is there any way to fix it..