可重复使用的 angular 组件

Question

I have a search text box in an angular component that is used to search a list of names. I would like to move this into a reusable component to avoid repeating the same code on multiple pages. What is the best practice in doing this? Should I just generate a new component and move the logic there? I know there is a way to perform component interaction with @input decorations but I'm having trouble wrapping my head around how that would work in this scenario. Here is the following HTML and typescript code:

<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
  }

Answer 1

As you already stated, you just create a new component and move the logic there. Because you want to have the same list of employees in the application, you should introduce a service to your application, which stores/manipulates/etc. your list of employees. That service then should be used by your component.