Angular: NGX Bootstrap, typeahead custom template query highlighting

1
votes

Does anyone know how to make highlighting work when using a custom template for typeahead? I've been struggling to style the typeahead results and it seems like I need to use optionsListTemplate? But when using ng-template, I seem to lose the match query highlighting feature and I don't know how to get it to work outside of recreating it on my own?

Any help with code examples would be appreciated!

1
angularngx-bootstrap

1 Answers

1
votes

Query Highlighting does not work with custom template.You have to write your own logic for that.....some thing like i did.

<ng-template  #customItemTemplate let-model="item" let-index="index" let-query="query">
            <div>
              <span [innerHTML]="patientAuthService.highlightQuery(model,query)"></span>
            </div>
          </ng-template>

You can modify it as per your knowledge.

highlightQuery(str, query): any {
    query = query.join(' ');
    if (str.toLocaleLowerCase().indexOf(query) > -1) {
      let left_str = str.substring(0, str.toLocaleLowerCase().indexOf(query));
      let right_str = str.substring(str.substring(0, str.toLocaleLowerCase().indexOf(query)).length + query.length, str.lenght);
      console.log(left_str+query+right_str);
      return '<h5>' + left_str + '<strong>' + query + '</strong>' + right_str + '</h5>';
    }
    else
      return '<h5>'+str+'</h5>';
  }