What is the proper way to attach event listeners to elements inside a component template?

Question

I have a simple SearchWidgetComponent that contains an input box. This would also display search results using li elements. I need to attach different event listeners to the input box like keydown, keyup, focus and blur. I would also need to attach mouse events on the li elements.

What is the proper way of attaching these event listeners to these elements inside a component?

Answer 1

Have you looked at event binding? https://angular.io/guide/user-input

                <input  id="productNameId" 
                        type="text" 
                        [(ngModel)] = product.productName
                        (keyup) = "onKeyUp()"
                        name="productName" />

Answer 2

Did you try filter ?

angular filter example