I'm facing a situation where I have a search text box within an Angular component that is responsible for searching a list of names. To avoid code duplication across multiple pages, I am looking to refactor this into a reusable component. What would be the best approach to achieve this? Should I simply create a new component and move the logic there? I have heard about using @input decorators for component interaction, but I am struggling to grasp how it would apply in this specific scenario. Below is the HTML and TypeScript code in question:
<input [ngModel]="searchStr" (ngModelChange)="employeeSearch($event)" class="form-control mb-3 pl-4" type="text"
id="employeeName" placeholder="Employee Name" name="employeeName">
employeeSearch(searchStr: string) {
this.searchStr = searchStr;
// some logic
}