angular 4 click na li

Mam problem z wywołaniem (click) na tagu z poziomu Angular 4.

       <li *ngFor="let item of items | SearchFilterPipe : searchText" (click)="onItemClick()">
            {{item}}
        </li>

export class SearchFilterComponent {
    @Input() items: string[];
    searchText: string = null;
    displayItems = false;

    constructor() { }

    onSearchInputFocus() {
        this.displayItems = !this.displayItems;
        this.searchText = null;
    }
    
    onItemClick() {
        console.log('asdads');
    }
}

W ogóle nie wykonuje się metoda "onItemClick" ktoś ma pomysł czemu?

Problem jest przez ```
*ngFor="let item of items | SearchFilterPipe : searchText"

bez Pipe'a działa poprawnie. Dostajesz coś w konsoli ?

Problem jest w tym, że wykonuje się metoda (blur) na input i wtedy nie wykonuje się (click) na li.

(blur)="onSearchInputFocus()"

Cały kod:

<input [(ngModel)]="searchText" (focus)="onSearchInputFocus()"  (blur)="onSearchInputFocus()" type="text" class="form-control" />
<div *ngIf="displayItems && searchText !== null">
    <ul>
        <li *ngFor="let item of items | SearchFilterPipe : searchText" (click)="onItemClick(item)">
            {{item}}
        </li>
    </ul>
</div>

 onSearchInputFocus() {
        this.displayItems = !this.displayItems;
        this.searchText = null;
    }
    
    onItemClick(item: string) {
        console.log(item);
        this.selectedItem = item;
        
        this.displayItems = !this.displayItems;
        this.searchText = null;
    }

Pytanie brzmi: jak wpierw wykonać (click) obiektu leżącego niżej w DOM a potem (blur) obiektu nadrzędnego w drzewie?

W onItemClick wykonujesz ten sam kod co w onSearchInputFocus . Moim zdaniem usun zdarzenie (focus), a efekt będzie ten sam.

Co za debi...