AlgoliaInstantSearchとAngularの統合

AlgoliaInstantSearchをVue.jsアプリに統合する方法について説明したので、Angularアプリで同じことを行う方法を見ていきましょう。最近リリースされたAngularInstantSearchライブラリのおかげで、これは簡単に実行できるようになりました。

Algoliaは、サービスソリューションとして人気のある検索を提供し、インデックス付きデータセットの作成と検索を容易にします。たとえば、このWebサイトでのインスタント検索は、Algoliaと JekyllAlgoliaプラグインを利用しています。

Angular4+でAngularInstantSearchを使用する必要があることに注意してください。

設定

クエリできるAlgoliaインデックスが必要です。データのインデックスの作成と入力はまったく別のトピックであるため、ここではすでにインデックスが作成されていると想定します。この記事では、Algoliaが提供するテストインデックスを使用します。

まず、angle-instantsearchパッケージをAngularプロジェクトに追加します。

# using Yarn:
$ yarn add angular-instantsearch

# or npm:
$ npm i angular-instantsearch

次に、アプリモジュールまたは機能モジュールで、 NgAisModule をインポートし、インポートのリストに追加します。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { NgAisModule } from 'angular-instantsearch';
import { AppComponent } from './app.component';

Angular機能モジュールでNgAisModuleを使用している場合は、 forRoot（）の呼び出しを省略してください。

最後に、InstantSearchのスタイルファイルも追加する必要があります。 .angular-cli.jsonのスタイル配列に次のエントリを追加できます。

.angular-cli.json

...
"styles": [
  "styles.css",
  "../node_modules/angular-instantsearch/bundles/instantsearch.min.css",
  "../node_modules/angular-instantsearch/bundles/instantsearch-theme-algolia.min.css"
],
...

.angular-cli.jsonファイルに変更を加えた後、ローカルサーバーを再起動する必要があります。

使用法

すべてはng-ais-instantsearchコンポーネントで始まります。これは、InstantSearchウィジェットのラッパーになります。 ng-ais-instantsearch は、Algoliaインデックスのキーと名前を持つ構成オブジェクトを受け取ります。

app.component.html

<ng-ais-instantsearch [config]="algoliaConfig">
  <!-- Widgets here -->
</ng-ais-instantsearch>

app.component.ts

import { Component } from '@angular/core';

ラッパーを配置して構成したので、ウィジェットの追加を開始して、インデックスをクエリおよびフィルター処理できます。

app.component.html

<ng-ais-instantsearch [config]="algoliaConfig">
  <ng-ais-search-box></ng-ais-search-box>
  <ng-ais-stats></ng-ais-stats>

  <h3>Filter by price range:</h3>
  <ng-ais-refinement-list attribute="salePrice_range"></ng-ais-refinement-list>
  <ng-ais-clear-refinements [autoHideContainer]="true" buttonLabel="Clear filter"></ng-ais-clear-refinements>

  <ng-ais-hits>
    <ng-template let-hits="hits" let-results="results">
      <!-- Nothing found? -->
      <div *ngIf="hits.length === 0">
        😢 Nothing found for
        <strong>{{results.query}}</strong>.
      </div>

      <div *ngFor="let hit of hits" class="result-card">
        <h2>
          <a [href]="hit.url" target="_blank">
            <ng-ais-highlight attribute="name" [hit]="hit">
            </ng-ais-highlight>
          </a>
        </h2>
        <p>{{ hit.shortDescription }}</p>

        <img [src]="hit.image" alt="{{ hit.name }} thumbnail">

        <p>
          <span class="price">{{ hit.salePrice | currency}}</span>
        </p>
      </div>
    </ng-template>
  </ng-ais-hits>

  <ng-ais-pagination></ng-ais-pagination>
</ng-ais-instantsearch>

ここでは、AlgoliaInstantSearchで利用できるいくつかのウィジェットを利用しました。

ng-ais-search-box ：入力を検索してインデックスをクエリします。
ng-ais-stats ：検索結果に関する統計。
ng-ais-refinement-list ：インデックスの属性で結果をフィルタリングするオプション（絞り込みと呼ばれます）。
ng-ais-clear-refinements ：適用された絞り込みをクリアするボタン。
ng-ais-hits ：魔法が発生し、結果（ hits ）が表示される場所。ここでは、 ng-template を使用してテンプレートを定義し、hitsを独自のマークアップでフォーマットできるようにしました。 hitsおよびresults変数にアクセスでき、各hitには1つの結果のデータがオブジェクトとして含まれています。
ng-ais-highlight ：クエリに一致する検索の部分を強調表示するウィジェット。
ng-ais-pagination ：追加の結果のためのページネーションウィジェット。

次に、検索結果に少しスタイルを適用してみましょう。

app.component.css

ng-ais-clear-refinements {
  display: block;
  margin-top: 1rem;
}

::ng-deep .ais-Hits {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  margin-top: 2rem;
}
::ng-deep .result-card {
  padding: 0.45rem 2rem;
  background: linear-gradient(45deg, #eee, white 50%);
  border-radius: 6px;
  border: 2px solid #f3f3f3;
}

:: ng-deep セレクターを使用して、ウィジェット内にネストされている要素に到達することに注意してください。

結果のUIは次のとおりです。

🕵️インデックスのクエリを楽しんでください！使用可能なウィジェットの詳細については、公式APIドキュメントを参照してください。