Library of Angular components for Angolia
MIT License
Library of components for Algolia on angular.
So :
npm install -save @tagazok/algolia-angular-components
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/
Displays a search bar that triggers a live search
<app-algolia-search [index]="'ikea'" [hitsPerPage]="16" [placeHolder]="Enter text..."></app-algolia-search>
Parameters :
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>
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"> </div> -->
</template>
</app-algolia-facets>
Parameters :
Simply displays the stats of the result of the research
<app-algolia-stats></app-algolia-stats>
Allows you to specify how you want your result to be sorted.
<app-algolia-sort [indices]="sortIndices" [label]="'Sort by'"></app-algolia-sort>
Parameters :
const sortIndices = [
{value: 'ikea', label: 'Featured'},
{value: 'ikea_price_asc', label: 'Price asc.'},
{value: 'ikea_price_desc', label: 'Price desc.'}
];
Add pagination to navigate in your results
<app-algolia-pagination [padding]="2"></app-algolia-pagination>
Parameters :
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 :
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 :)
Created using https://github.com/manekinekko/angular-library-starter