@angular-material-extensions/algolia - Angular Library that enhances algolia instant search library - Material UI components and general services and directives
Built by and for developers :heart:
Do you have any question or suggestion ? Please do not hesitate to contact us!
Alternatively, provide a PR | open an appropriate issue here
If did you like this project, support angular-material-extensions
by starring :star: and sharing it :loudspeaker:
Table of Contents
View all the directives and components in action at https://angular-material-extensions.github.io/algolia
Dependencies
- Angular (requires Angular 2 or higher | we are using already V9 ;)
for the directive as standalone you just need to install the following packages
- "algoliasearch": "^3.35.1",
- "angular-instantsearch": "^3.0.0-beta.5",
- "instantsearch.js": "^4.7.0",
- "@types/algoliasearch": "^3.34.10"
npm install algoliasearch@3 angular-instantsearch@beta instantsearch.js@3
npm install --save-dev @types/algoliasearch
1. Install via ng add. (Recommended)
If Angular Material Design is not setup, just run ng add @angular/material
learn more
Now add the library via the angular schematics
and everything will be setup for you
ng add @angular-material-extensions/algolia
2. Install via npm. (Alternative)
Now install @angular-material-extensions/algolia
via:
npm install --save @angular-material-extensions/algolia
Requirements (peer dependencies):
for the ui input component, please consider to install the following packages
npm i @angular/cdk @angular/material @angular/animations
Additional requirements Theme (Material Design)
SystemJS
Note:If you are using SystemJS
, you should adjust your configuration to point to the UMD bundle.
In your systemjs config file, map
needs to tell the System loader where to look for @angular-material-extensions/algolia
:
{
'@angular-material-extensions/algolia';: 'node_modules/@angular-material-extensions/algolia/bundles/algolia.umd.js',
}
Once installed you need to import the main module:
import { MatAlgoliaModule } from '@angular-material-extensions/algolia';
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice MatAlgoliaModule.forRoot()
):
import { MatAlgoliaModule } from '@angular-material-extensions/algolia';
@NgModule({
declarations: [AppComponent, ...],
imports: [
MatAlgoliaModule, ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
Usage
Components
Directives
add matAlgoliaRefresh
to a button component in order to trigger a refresh mechanism via algolia api automatically
<button mat-icon-button matAlgoliaRefresh matTooltip="Aktualisieren">
<mat-icon>refresh</mat-icon>
</button>
option | bind | type | default | description |
---|
attribute | Input() | string ; | - | key to filter |
Please checkout the full documentation here
Run Demo App Locally
$ git clone https://github.com/angular-material-extensions/algolia.git
-
build the library
-
serve the demo app
Development
- clone this repo
- Install the dependencies by running
npm i
- go to lib directory under
projects/angular-material-extensions/algolia
- build the library
npm run build
Other Angular Libraries
Support
Built by and for developers :heart: we will help you :punch:
License
Copyright (c) 2020 Anthony Nahas. Licensed under the MIT License (MIT)