(Angular 12) Search button response data is not show in template before Click the button twice

Question

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

Answer 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
    })
;}