How to add product data to the search field in angular-CodePudding

I have a two-component navbar and product, and in the navbar component, I have a search box, and I want to search the product data from the product component, and I don't know how to do this, so please anyone help me with this.

CodePudding user response：

You can do this with BehaviorSubject and making one common service between these both comoponents.

Create new service and make BehaviorSubject in it.

search_value = new BehaviorSubject<any>(null);

In navbar import that service and on change of search value set value in search_value like this :

search_value.next(search_box_value);

In product page import service and subscribe search_value like this :

search_value.subscribe((data)=>{
  // you will get search box value in data
},(error)=>{
  // you can handle error if any
});

CodePudding user response：

Call the API with serach text as id and get the search list and store the list in service and display the list in html using *ngfor.Refer the below code:

<input type="text"  [(ngModel)]="searchText" placeholder="Search" >
       <button type="submit" (click)="searchdetails()"><i  aria-hidden="true"></i></button>
    
Ts:
    searchText: any;
     public searchdetails(){
    this.search=this.searchText;
    this.productservice.searchdetails(this.search);
   

  }
 Service:
  //Get the Detail from API 
  public searchdetails(searchText: string) {

    this.http.get(this.rootUrl   '/SearchProduct/'   searchText).toPromise().then(res => this.list = res as products[])
  }