Customize algolia's search box in angular

Question

I'm using algolia in angular.
There is a search box which I want to customize.
Here is what I have done so far.
.html file -

<ais-instantsearch [config]="productsConfig">
    <ais-search-box></ais-search-box>
    <ais-hits>
    </ais-hits>
<ng-template let-hits="hits">    

.ts file

import { Component, OnInit } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';
import algoliasearch from 'algoliasearch/lite';
import { environment } from 'src/environments/environment';

const searchClient = algoliasearch(
  environment.algolia_application_id,
  environment.algolia_search_api_key
);

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.scss']
})

export class ProductsComponent implements OnInit {

  constructor() { }

  productsConfig = {
      indexName: 'products',
      searchClient
  };

  ngOnInit(): void {
  }
}    

I'm not able to customize search box.
How to customize algolia's seach box in angular?
Any help would be appreciated.
Thanks

Answer 1

I couldn't customized search box so I tried it in different way.
component file -

  getProductList(){
      var parameters = {
        query : '',
        hitsPerPage : 1,
        filters: `doctorId = ${this.doctorId}`
      };
      this.algoliaService.getData('products', parameters)
        .then(data => {
          if( data.hits.length > 0 )
          {
            this.doctorDetails = data.hits[0];
          }       
      })
  }    

service file -

getData(indexName, parameters) : any {
  const index = searchClient.initIndex(indexName);
  return index.search(parameters);
}    

This way you can get data from in component file, so you need not to customize search. Just need to pass your search box value in parameter.