Skip to content

meilisearch/meilisearch-angular

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

Meilisearch-Angular

Meilisearch Angular

Meilisearch | Documentation | Discord | Roadmap | Website | FAQ

License

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!

This repository describes the steps to integrate a relevant front-end search bar with a search-as-you-type experience!

Installation

To integrate a front-end search bar, you need to install two packages:

  • the open-source 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 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:

yarn add angular-instantsearch@3.0.0-beta.5 @meilisearch/instant-meilisearch instantsearch.js
# or
npm install angular-instantsearch@3.0.0-beta.5 @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.

Getting Started

In the app.component.ts file, add the following code:

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:

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:

<header class="header">
  <h1 class="header-title">Meilisearch + Angular InstantSearch</h1>
  <p class="header-subtitle">Search in Steam video games 🎮</p>

</header>

<div class="container">
  <ais-instantsearch [config]="config">
    <div class="search-panel">
      <div class="search-panel__results">
        <div class="searchbox">
          <ais-search-box placeholder=""></ais-search-box>
        </div>

        <ais-hits>
          <ng-template let-hits="hits">
            <ol class="ais-Hits-list">
              <li *ngFor="let hit of hits" class="ais-Hits-item">
                <div class="hit-name">{{hit.name}}</div>
              </li>
            </ol>
          </ng-template>
        </ais-hits>
      </div>
    </div>
  </ais-instantsearch>
</div>

At the bottom of /src/polyfill.ts file, add the following code:

;(window as any).process = {
  env: { DEBUG: undefined },
}

🚀 For a full getting started example, please take a look at this CodeSandbox:

Edit MS + Angular-IS

💡 If you have never used Angular InstantSearch before, we recommend reading this getting started documentation.

Customization and Documentation


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 repository.

About

Instant Meilisearch for Angular Framework

Resources

License

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •