Algolia components library for Angular

Library of components for Algolia on angular.

So :

• Components may change, appear from nowhere or disapear in a black hole (it happens)
• Documentation may not be accurate and no up to date

Installation

npm install -save @tagazok/algolia-angular-components

Usage

Import the AlgoliaModule and the AlgoliaService in your app

import { AlgoliaModule, AlgoliaService } from '@tagazok/algolia-angular-components'

Load the module into your app passing

@NgModule({
  ...,
  imports: [
    AlgoliaModule.forRoot({appId: 'YOUR_APP_ID', apiKey: 'YOUR_APP_KEY'}),
  ],
  ...
})
export class AppModule { }

You are now ready to use the components in your app \o/

List of components

Search

Displays a search bar that triggers a live search

<app-algolia-search [index]="'ikea'" [hitsPerPage]="16" [placeHolder]="Enter text..."></app-algolia-search>

Parameters :

• index : The algolia index
• hitsPerPage : The maximum number of results you want the research to return (default is 12)
• placeHolder : The placeholder of the input (default is "Search")

Results

Displays the results of your research in a custom template

<app-algolia-results>
  <template let-item="item">
    <!-- The html template of a single result item -->
  </template>
</app-algolia-result>

Facets

Displays facet and manage filters on click.

<app-algolia-facets [attribute]="'materials'"[label]="'Material'" [limit]="'10'" [selectedcssclass]="'selected-filter'">
  <template let-item="item">
     <!-- The html of a single result item -->
    <!-- ex : {{item.key}} <span class="facet-val">({{item.val}})</span> -->
    <!-- ex : <div class="facet-color" [attr.data-facet-value]="item.key">&nbsp;</div> -->
  </template>
</app-algolia-facets>

Parameters :

• attribute : The attribute of which you want the facet
• label : The label of the List (may be removed in future release... not sure yet)
• limit : The maximum number of results per facets
• selectedcssclass : The class to apply when a facet value is selected for filtering the query

Stats

Simply displays the stats of the result of the research

<app-algolia-stats></app-algolia-stats>

Sort (early WIP)

Allows you to specify how you want your result to be sorted.

<app-algolia-sort [indices]="sortIndices" [label]="'Sort by'"></app-algolia-sort>

Parameters :

• label : The placeholder/title of the search field (will be removed in future release as md- has been removed)
• indices : List of items to sort with. Exemple :

const sortIndices = [
      {value: 'ikea', label: 'Featured'},
      {value: 'ikea_price_asc', label: 'Price asc.'},
      {value: 'ikea_price_desc', label: 'Price desc.'}
    ];

Pagination

Add pagination to navigate in your results

<app-algolia-pagination [padding]="2"></app-algolia-pagination>

Parameters :

• padding : See +/- n page numbers (default is 3 if not specified)

Stars

Display Stars, usefull for ratings

<app-algolia-stars [value]="3" [min]="1" [max]="5"></app-algolia-stars>

Parameters : min: The minimum value (default is 0); max: The maximum value to display empty stars value : The number of plain stars

TODO :

• See what we can do with css customisation
• [DONE] Better algolia-result customisation (row / card / column views)
• manage OR request for filters.
• In algolia-stats. Add attribute to choose which stat to display (# and time)
• Add prev / new arrow on pagination
• "Filter" by component
• Automatic routes change when whanging page or filter, etc

Example

This app has been built with the components of this library with the idea of Algolia e-commerce demo app
To be published very soon on github :)

Thanks

Created using https://github.com/manekinekko/angular-library-starter