Angular 2 - Click event on changing array - arrays

Question

Currently I'm trying to learn some more about Angular 2 by creating the amazing one of a kind shopping list application. However got stuck on creating a click event on my search results.
view.html
<form class="search">
<input type="text" name="query" class="form-control" [(ngModel)]="query" (ngModelChange)="change()" (blur)="onBlur()" />
<ul class="results" [class.hidden]="!showResults">
<li *ngFor="let result of results">
<a (click)="selectResult(result)">
{{ result.title }}
</a>
</li>
</ul>
</form>
view.ts
import { Component, Input, Output, EventEmitter } from '#angular/core';
#Component({
selector: 'search',
templateUrl: 'app/search/view.html',
styleUrls: ['app/search/view.css']
})
export class Search
{
... Some interesting things here
// selectResult
// ------------------------------ -->
selectResult (selected: any)
{
console.log(123);
}
// ------------------------------ -->
... More interesting things here
}
When someone starts typing the results will change dynamically. When someone clicks on a result nothing happens, no console.log(123).
Anyone knows how to attach click to a ngFor that changes?

Answer 1

You forget about one little thing, namely remove default href action. In your HTML file:
<a href="#" (click)="selectResult($event, result)">
{{ result.title }}
</a>
and in your TypeScript file:
selectResult (event: any, selected: any) {
event.preventDefault();
console.log(123);
}
I hope that it will help.

Answer 2

I found a way to solve this problem.
Somehow the click event is not bound when you hide the element. (wtf...?)
This is the final solution:
view.html
<form class="search">
<input type="text" name="query" class="form-control" [(ngModel)]="query" (ngModelChange)="change()" (blur)="onBlur()" />
{{ results.length }}
<ul class="results" *ngIf="results.length != 0">
<li *ngFor="let result of results">
<a href="#" (click)="selectResult(result)">
{{ result.title }}
</a>
</li>
</ul>
</form>