-1

Here is my search input box and button

  <div class="col-lg-8">
    <input #text class="form-control" placeholder="Search Customer" required/>
  </div>

  <button type="button" class="btn btn-info me-2" (click)="searchData(text)">Search</button>

Here is my component code i got the value in console

   searchData(text:any){
     this.service.searchCustomer(text.value).subscribe(
       response =>{
         this.list = response;
         console.log(this.list); 
         this.cData = this.list.data.model;
        }
  );
}

Here is my service that i return

    searchCustomer(text:string){
      let body ={"searchText":text}
       return this.http.post(this.baseUrl+'/search-customer', body);
      }
Parvez Ahmed
  • 650
  • 7
  • 16

1 Answers1

1

it's working fine I put an alert into search data this function and I got the alert which I put in that function

With One Click

you have to put in your constructor

constructor(private changeRef: ChangeDetectorRef) {}

searchData(text:any){
 this.service.searchCustomer(text.value).subscribe(
   response =>{
     this.list = response;
     console.log(this.list); 
     this.cData = this.list.data.model;
     this.changeRef.detectChanges(); // this line detect changes
    })
;}
divyraj
  • 191
  • 2
  • 14
  • all things are ok but i need to render this data in html using one click.Thanks – Parvez Ahmed Nov 03 '21 at 06:53
  • ok so you have to add one line in your constructor `constructor( private changeRef: ChangeDetectorRef, ){}` in your click function after getting, data add this line `functionName(){ // your response data after add this line this.changeRef.detectChanges(); }` – divyraj Nov 03 '21 at 06:58
  • @divraj update your answer with code – Parvez Ahmed Nov 03 '21 at 07:20
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 03 '21 at 08:47
  • I update the code which you ask can you check and let me know if you have any problem with that code. – divyraj Nov 03 '21 at 09:22