Как передать значение из одного компонента в другой? (Angular)

я только недавно начала изучать Angular, и возник вопрос. Я хочу реализовать метод search для поиска нужно продукта на моём сайте, сделала search.pipe.ts, который работает, но input для ввода находится в компоненте header.component.ts, а массив продуктов в компоненте car-list.component.ts.

car-list.component.html

    <div *ngFor="let car of cars  | paginate: { itemsPerPage: pageNumber, currentPage: currentPg} | **search:searchStr**" class="col-md-3">
    
      <div class="product-box">
    
        <img src="{{'data:image/jpg;base64,' + car.image }}" alt="">
        <h3>{{ car.name }}</h3>
        <div class="price">{{ car.price | currency:'USD' }}</div>
        <button class="btn btn-primary btn-sm">Add to cart</button> <!--(click)="addToCart(tempProduct)"-->
      </div>
      <br>
    </div>

header.component.html

    <form class="d-flex me-5" >
        <input type="text"  class="form-control me-2"  placeholder="Search cars...">
    </form>
    ```
    
    header.component.ts
    
    
    ```
    export class HeaderComponent implements OnInit {
      searchStr: string = '';
    
      constructor() {
      }
    
      ngOnInit(): void {
      }
    
    }

search.pipe.ts

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {

  transform(cars: any[], value: any) {
    return cars.filter(car => {
      return car.name.includes(value);
    })
  }
}

Хочу, чтобы вводимые значения из компонента header передались в компонент car-list, и я смогла найти нужный мне продукт.