How to use a custom template in ng-bootstrap typeahead?

ONLINECAST

2 min read

·

05-10-2024

9

0

Share

Beyond the Basics: Crafting Custom Typeahead Templates in ng-Bootstrap

The power of ng-Bootstrap's Typeahead component lies in its ability to streamline search and selection. But what if the standard template doesn't fit your specific needs? Fear not, for ng-Bootstrap gives you the flexibility to craft custom templates, ensuring your typeahead component integrates seamlessly with your application's unique design.

The Scenario: A Custom Typeahead Template

Let's say you're building an e-commerce website. You want users to search for products using a typeahead. But instead of just showing the product name, you want to display a thumbnail image alongside it. Here's how to achieve this with a custom template.

Original Code:

<input type="text" 
       [ngbTypeahead]="search"
       [resultTemplate]="resultTemplate"
       [inputTemplate]="inputTemplate">

<ng-template #resultTemplate let-result="result">
  <div class="media">
    <img class="mr-3" src="{{result.imageUrl}}" alt="{{result.name}}">
    <div class="media-body">
      {{ result.name }}
    </div>
  </div>
</ng-template>

<ng-template #inputTemplate let-term="term" let-focus="focus">
  <input type="text" 
         class="form-control"
         [placeholder]="'Search products'"
         [value]="term"
         (input)="search($event.target.value)"
         [ngbTypeahead]="search" 
         [resultTemplate]="resultTemplate"
         [inputTemplate]="inputTemplate" 
         (focus)="focus()">
</ng-template>

Customizing the Template:

1. Create a Template: The most important step is defining your template using ng-template. Here, we'll create a resultTemplate to display both the image and product name.

<ng-template #resultTemplate let-result="result">
  <div class="media">
    <img class="mr-3" [src]="result.imageUrl" [alt]="result.name">
    <div class="media-body">
      {{ result.name }}
    </div>
  </div>
</ng-template>

2. Bind Data: Inside the template, use Angular's interpolation ({{ }}) or property binding ([ ]) to dynamically display data from the result object.

3. Styling: Apply your preferred CSS styles to ensure the template fits seamlessly with your website's design.

Understanding the Code:

• ng-template #resultTemplate: This defines a template with the name resultTemplate, which is later referenced in the input component.
• let-result="result": This declares a local variable called result that will hold each individual result object from the typeahead.
• [src]="result.imageUrl" and [alt]="result.name": These bind the image source and alt text attributes to properties of the result object, ensuring dynamic display.

Advantages of Custom Templates:

• Enhanced Visuals: Tailor your typeahead to perfectly match your website's aesthetic.
• Improved User Experience: Display relevant information that helps users make informed decisions.
• Flexibility: Custom templates allow for complex layouts and dynamic content.

Key Considerations:

• Performance: When working with a large dataset, consider optimizing your template for performance to prevent UI lag.
• Accessibility: Ensure your custom template adheres to accessibility guidelines for all users.

Beyond the Basics:

You can create multiple custom templates, including:

• inputTemplate: Customize the input field's appearance and behavior.
• suggestionTemplate: Customize the appearance of suggestions in the dropdown.

Conclusion:

By embracing custom templates, you can unlock the full potential of ng-Bootstrap's Typeahead component. This empowers you to craft user-friendly, visually appealing search experiences that perfectly align with your website's design and functionality.