Select Component with Filter on Angular

Sample of the select component with filter example which applies filter operation to list without sending any request to the server is described below. The select component, which is used and modified here, is made on Angular Material that is official components for Angular.

The difference between the basic select component in Angular Material and the component that is created in this story seem above.

Firstly, we give padding-top to div that covers mat-option list to open place for the searching field.

After the padding

Then, the searching field is placed and stick to the area that we created. To make it, mat-form-field is inserted before mat-option list and some style codes are inserted to the CSS file.

Style code of search field

NOTE: With position: sticky, the searching field is stuck to at the top and it does not move with scroll.

As you see above, there are 2 methods whose names are lookup and clean.

• lookup(): it is used to change the shown list according to input that we enter. It is triggered whenever the change happens.
• clean(): it is used to refresh the shown list. It is triggered whenever the cross button that placed right is clicked.

Here is the result and the source code is available here.

Edit on StackBlitz