1.0.4 • Published 7 years ago

@tagazok/algolia-angular-components v1.0.4

Weekly downloads
1
License
MIT
Repository
github
Last release
7 years ago

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