feat(angular): avoid errors

Author: Haroenv

angular-instantsearch/using-instantsearch/src/app/facets/facets.component.html

@@ -6,7 +6,7 @@
         type="checkbox"
         [value]="brand.value"
         [checked]="brand.isRefined"
-        (change)="refineBrands(brand.value)"
+        (change)="refineBrands!(brand.value)"
       />
       <span>
         {{ brand.label }}
@@ -23,7 +23,7 @@
   @for (querySuggestion of querySuggestions; track querySuggestion) {
   <li>
     <a
-      (click)="$event.preventDefault(); refineQuery(querySuggestion)"
+      (click)="$event.preventDefault(); refineQuery!(querySuggestion)"
       href="#"
     >
       {{ querySuggestion }}

angular-instantsearch/using-instantsearch/src/app/facets/facets.component.ts

@@ -32,9 +32,9 @@ export class FacetsComponent {
       })({}),
       index({ indexName: 'instant_search_demo_query_suggestions' }).addWidgets([
         connectHits(({ hits }) => {
-          this.querySuggestions = (
-            hits as Array<Hit<BaseHit & { query: string }>>
-          ).map((hit) => hit.query);
+          this.querySuggestions = (hits as Array<Hit<{ query: string }>>).map(
+            (hit) => hit.query
+          );
         })({}),
       ]),
     ]);

angular-instantsearch/using-instantsearch/src/app/home/home.component.html

@@ -1,11 +1,11 @@
 <main class="main" style="display: flex">
   <app-facets />
   <div>
-    <input type="text" [value]="query" (input)="search($event.target.value)" />
+    <input type="text" [value]="query" (input)="handleInput($event)" />
     <ul>
-      @for (hit of hits; track hit.objectId) {
+      @for (hit of hits; track hit.objectID) {
       <li>
-        <a routerLink="/product">
+        <a routerLink="/product" [queryParams]="{ objectID: hit.objectID }">
           {{ hit.name }}
         </a>
       </li>

angular-instantsearch/using-instantsearch/src/app/home/home.component.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import { InstantSearchService } from '../instant-search.service';
 import { connectHits, connectSearchBox } from 'instantsearch.js/es/connectors';
-import { BaseHit } from 'instantsearch.js';
+import { Hit } from 'instantsearch.js';
 import { FacetsComponent } from '../facets/facets.component';
 
 @Component({
@@ -12,7 +12,7 @@ import { FacetsComponent } from '../facets/facets.component';
   templateUrl: './home.component.html',
 })
 export class HomeComponent {
-  public hits?: BaseHit[];
+  public hits?: Hit[];
   public query?: string;
   public search?: (value: string) => void;
 
@@ -30,7 +30,17 @@ export class HomeComponent {
     ]);
   }
 
+  handleInput(event: Event) {
+    if (event.target instanceof HTMLInputElement) {
+      this.search!(event.target.value);
+    }
+  }
+
   ngAfterContentInit() {
     this.InstantSearchService.start();
   }
+
+  ngOnDestroy() {
+    this.InstantSearchService.dispose();
+  }
 }

angular-instantsearch/using-instantsearch/src/app/instant-search.service.ts

@@ -32,6 +32,7 @@ export class InstantSearchService {
             }
             return window.location;
           },
+          cleanUrlOnDispose: false,
         }),
       },
     });
@@ -41,6 +42,10 @@ export class InstantSearchService {
     this.instantSearchInstance.start();
   }
 
+  dispose() {
+    this.instantSearchInstance.dispose();
+  }
+
   addWidgets(widgets: Array<Widget | IndexWidget>) {
     this.instantSearchInstance.addWidgets(widgets);
   }