https://github.com/tagazok/algolia-angular-components
Library of Angular components for Angolia
https://github.com/tagazok/algolia-angular-components
Last synced: about 1 year ago
JSON representation
Library of Angular components for Angolia
- Host: GitHub
- URL: https://github.com/tagazok/algolia-angular-components
- Owner: tagazok
- License: mit
- Created: 2017-01-29T15:25:13.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-27T16:40:09.000Z (over 9 years ago)
- Last Synced: 2025-04-12T23:25:02.423Z (about 1 year ago)
- Language: TypeScript
- Size: 54.7 KB
- Stars: 12
- Watchers: 1
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-algolia - Angular components
README
## Algolia components library for Angular
Library of components for Algolia on angular.
WARNING: THIS IS A WIP
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
```sh
npm install -save @tagazok/algolia-angular-components
```
### Usage
Import the AlgoliaModule and the AlgoliaService in your app
```javascript
import { AlgoliaModule, AlgoliaService } from '@tagazok/algolia-angular-components'
```
Load the module into your app passing
```javascript
@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
```html
```
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
```html
```
### Facets
Displays facet and manage filters on click.
```html
```
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
```html
```
#### Sort (early WIP)
Allows you to specify how you want your result to be sorted.
```html
```
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 :
```javascript
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
```html
```
Parameters :
* padding : See +/- n page numbers (default is 3 if not specified)
#### Stars
Display Stars, usefull for ratings
```html
```
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 :)*
View on Chrome (see Ipad and Nexus 5X screenshots)
## Thanks
Created using https://github.com/manekinekko/angular-library-starter
