How to pass value from one component to another? (Angular)-CodePudding

I just recently started learning Angular and I have a question. I want to implement a search method to search for a product on my site, I made search.pipe.ts, which works, but the input for input is in the header.component.ts component, and the products array is in the car-list.component.ts component.

car-list.component.html

<div *ngFor="let car of cars | paginate: { itemsPerPage: pageNumber, currentPage: currentPg} | **search:searchStr**" >

  <div >

    <img src="{{'data:image/jpg;base64,'   car.image }}" alt="">
    <h3>{{ car.name }}</h3>
    <div >{{ car.price | currency:'USD' }}</div>
    <button >Add to cart</button> <!--(click)="addToCart(tempProduct)"-->
  </div>
  <br>
</div>

header.component.html

<form >
    <input type="text"  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);
    })
  }
}

I want the input values from the header component to be passed to the car-list component so that I can find the product I need.

CodePudding user response：

In this case you can use a shared service where you can pass data from your header component and load that data in your products component. For further reference - Angular 4 pass data between 2 not related components

CodePudding user response：

use @Input and @Output decorators to communicate between components