Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/meilisearch/meilisearch-angular
Instant Meilisearch for Angular Framework
https://github.com/meilisearch/meilisearch-angular
Last synced: 2 months ago
JSON representation
Instant Meilisearch for Angular Framework
- Host: GitHub
- URL: https://github.com/meilisearch/meilisearch-angular
- Owner: meilisearch
- License: mit
- Created: 2021-02-10T10:00:36.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-07-25T14:31:21.000Z (6 months ago)
- Last Synced: 2024-08-04T01:15:22.582Z (6 months ago)
- Homepage: https://www.meilisearch.com/
- Size: 36.1 KB
- Stars: 23
- Watchers: 5
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-meilisearch - Angular
README
Meilisearch Angular
Meilisearch |
Meilisearch Cloud |
Documentation |
Discord |
Roadmap |
Website |
FAQ
⚡ How to integrate a front-end search bar in your Angular application using Meilisearch
**Meilisearch** is an open-source search engine. [Discover what Meilisearch is!](https://github.com/meilisearch/meilisearch)
This repository describes the steps to integrate a relevant front-end search bar with a search-as-you-type experience!
## ⚡ Supercharge your Meilisearch experience
Say goodbye to server deployment and manual updates with [Meilisearch Cloud](https://www.meilisearch.com/cloud?utm_campaign=oss&utm_source=github&utm_medium=meilisearch-angular). Get started with a 14-day free trial! No credit card required.
## Installation
To integrate a front-end search bar, you need to install two packages:
- the open-source [Angular InstantSearch](https://github.com/algolia/angular-instantsearch/) library powered by Algolia that provides all the front-end tools you need to highly customize your search bar environment.
- the Meilisearch client [instant-meilisearch](https://github.com/meilisearch/meilisearch-js-plugins/tree/main/packages/instant-meilisearch) to establish the communication between your Meilisearch instance and the Angular InstantSearch library.
_Instead of reinventing the wheel, we have opted to reuse the InstantSearch library for our own front-end tooling. We will contribute upstream any improvements that may result from our adoption of InstantSearch._
Run:
```bash
yarn add [email protected] @meilisearch/instant-meilisearch instantsearch.js
# or
npm install [email protected] @meilisearch/instant-meilisearch instantsearch.js
```
NB: If you don't have any Meilisearch instance running and containing your data, you should take a look at this [getting started page](https://www.meilisearch.com/docs/learn/getting_started/installation).
## Getting Started
In the `app.component.ts` file, add the following code:
```js
import { Component } from '@angular/core'
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'
const searchClient = instantMeiliSearch(
'https://ms-adf78ae33284-106.lon.meilisearch.io',
'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303'
)
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'angular-app'
config = {
indexName: 'steam-video-games',
searchClient,
}
}
```
In the `app.module.ts` add the following code:
```js
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { NgAisModule } from 'angular-instantsearch'
import { AppComponent } from './app.component'
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NgAisModule.forRoot()],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
In the `app.component.html` file, add the following code:
```html
Meilisearch + Angular InstantSearch
Search in Steam video games 🎮
-
{{hit.name}}
```
At the bottom of `/src/polyfill.ts` file, add the following code:
```js
;(window as any).process = {
env: { DEBUG: undefined },
}
```
🚀 For a full getting started example, please take a look at this CodeSandbox:
[](https://codesandbox.io/p/sandbox/ms-angularis-68q9c6)
💡 If you have never used Angular InstantSearch before, we recommend reading this [getting started documentation](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/angular/).
## Customization and Documentation
- The open-source Angular InstantSearch library is widely used and well documented in the [Algolia documentation](https://www.algolia.com/doc/api-reference/widgets/angular/). It provides all the widgets to customize and improve your search bar environment in your Angular application.
- The [instant-meilisearch documentation](https://github.com/meilisearch/meilisearch-js-plugins/tree/main/packages/instant-meilisearch) to add some customization.
- The [Meilisearch documentation](https://www.meilisearch.com/docs/).
**Meilisearch** provides and maintains many **SDKs and Integration tools** like this one. We want to provide everyone with an **amazing search experience for any kind of project**. If you want to contribute, make suggestions, or just know what's going on right now, visit us in the [integration-guides](https://github.com/meilisearch/integration-guides) repository.