The actual demo for development is not good at all, we need a storybook like.

This issue will be split into two PRs:

• Ensure angular-instantsearch can be run on the server side (no errors of rendering)
• Request Algolia API on the server to populate the page with data

The first part would pretty easy to achieve by using:

 import { PLATFORM_ID } from '@angular/core';
 import { isPlatformBrowser, isPlatformServer } from '@angular/common';
 
 constructor(@Inject(PLATFORM_ID) private platformId: Object) { ... }
 
 ngOnInit() {
   if (isPlatformBrowser(this.platformId)) {
      // Client only code.
      ...
   }
   if (isPlatformServer(this.platformId)) {
     // Server only code.
     ...
   }
 }

The second part is more difficult, we would have to:

1. Gather all the widgets mounted on the page and their configuration
2. Compute the helper state from the URL query
3. Fetch data from Algolia API
   • We have noticed that using the HttpClient from Angular blocks the rendering into ngOnInit() life cycle hooks of a component. It implies writing an algolia search client adapter working with the HttpClient and use it with Angular InstantSearch.
4. Populate data into the different widgets state

Right now we did not found a way to have the same logic of the React-InstantSearch for the SSR which is:

1. First render on server -> Gather all the widgets and their configurations
2. Query Algolia API
3. Populate data into the widgets
4. Second render on server with the data

If you have any idea on how to achieve the above solution with https://www.npmjs.com/package/@nguniversal/express-engine please tell us 🙏

Add to every widget the autoHideContainer option which hides the container when there are no data to render.

Replace it with <ng-ais-numeric-range /> : https://instantsearch-css.netlify.com/widgets/numeric-range/

Hi,

I got the facets working on the same page as the searchbar and the results. But I want to have the facets in a different page as shown in the gif. Any tips on how to do this?

Thanks!

• Getting Started
• Highlighting results
• Routing and URLs
• Designing the no results page

Actually this widget does not have any styling.

• Generate CSS inside instantsearch-theme-algolia
• Document the import of noUiSlider css

Hello, I deleted this issue

• Breadcrumb
• ClearAll
• CurrentRefinedValues
• HierarchicalMenu
• Hits
• HitsPerPage
• InfiniteHits
• Menu
• NumericRefinementList
• NumericSelector
• Pagination
• PriceRanges
• RangeSlider
• RefinementList
• SearchBox
• SortBySelector
• StarRating
• Stats
• Toggle

Thank's @mthuret for the report.

I was working with TravisCI but it was slow, for an open source project I would rather use CircleCI. Here at Algolia we use TravisCI everywhere, is there a strong opinion on using TravisCI or I can use CircleCI like I'm used to do?

cc @bobylito @vvo

This is crap, make shine at least a bit 🙌

• Breadcrumb
• ClearAll
• CurrentRefinedValues
• HierarchicalMenu
• Hits
• HitsPerPage
• InfiniteHits
• Menu
• NumericRefinementList
• NumericSelector
• Pagination
• PriceRanges
• RangeSlider
• RefinementList
• SearchBox
• SortBySelector
• StarRating
• Stats
• Toggle

Send change event through ng-ais-instantsearch with the new search parameters:

API:

<ng-ais-instantsearch
    [config]="{ ... }"
    (change)="handleSearchParametersChange($event)"
>

• Script to build dev-novel UI
• Deploy it on netlify on /dev-novel

• dev
• test
• build
• release

Update from InstantSearch.css

My initial page params: ?q=&idx=items&p=2
it shows me only results from page 2 and i can not show result form page 1 and page 0.
I dont want to use pagination. Im only using infinite-hits with show more button.

There is a way to show results from p0 to p2 ?

A new version of instantsearch.css has been released with new widget naming in order to have same in between InstantSearch libraries.

Hi,

Can I restrict searchable attributes with angular-instantsearch? I found an example with Algolia’s Javascript Helper. Do I have to import this library to my project, or is there a way to do this with the angular-instaseacrh library? are there any examples available?

Thanks!

https://community.algolia.com/instantsearch.js/v2/examples.html

• e-commerce
• media
• tourism

As part of InstantSearch specs, we decided to move to attribute instead of attributeName, everywhere.

There are still parts in angular-instantsearch that are using attributeName, can you change them?

https://github.com/algolia/angular-instantsearch/search?utf8=%E2%9C%93&q=attributeName&type=

Hi, I think the show more results button in the infinite results should be optional. In my case, I need to hide it and trigger some how the show more function to bring the next results when the user scrolls to the bottom of the page. Is there a simple way to trigger the show more function without using the button?

Hi all
Is it possible to make a dropdown out of angular-instantsearch or maybe combine it with Bootstrap Typeahead (https://ng-bootstrap.github.io/#/components/typeahead/examples)?

This would be consistent with Vue InstantSearch

Gather all libraries options into a document and decide with the team what options and their name are we keeping.

(cc @ronanlevesque I think this could be part of the instantsearch.css alignment as well)

Right now we have non-generated documentation available here: https://iam4x.gitbooks.io/angular-instantsearch/

We need a static website on the same template as the others instantsearch libraries.

• ClearAll
• CurrentRefinedValues
• HierarchicalMenu
• Hits
• HitsPerPage
• InfiniteHits
• Menu
• NumericRefinementList
• NumericSelector
• Pagination
• PriceRanges
• RangeSlider
• RefinementList
• SearchBox
• SortBySelector
• StarRating
• Stats
• Toggle

It's a bit a pain to have to change branch to update the documentation, I would like the documentation update to be linked with a feature PR.

• Add documentation into master branch
• Make a release script that will push the documentation folder on gitbook branch

Check as well https://github.com/GitbookIO/gitbook-cli which can build documentation locally for development purpose.

I'm submitting a...

• Bug report

Current behavior

Algolia InstantSearch Angular component does not work with Angular CLI v6

Expected behavior

Algolia InstantSearch Angular component should work with Angular CLI v6

Minimal reproduction of the problem with instructions

> ng version
	- Angular CLI: 6.0.0-beta.4
> ng new instantsearch-test
	- (Now setup Algolia InstantSearch component as described here: https://community.algolia.com/angular-instantsearch/getting-started.html)

> yarn start

Open Chrome browser and enable devtools. We receive an error "process is not defined" in Console

Apparently, there was a breaking change in Angular CLI - Read this Comment

Reference: angular/angular-cli#9827

Environment

Package versions:

npm ls --depth 0
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected] extraneous
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

Browser:

• Chrome (desktop) version 64.0.3282.186

System:

• TypeScript version: 2.6.2 (strict mode ON)
• Node version: 8.9.4
• Platform: Windows 10 Pro 1709

Breaking change, we are aligning the options naming for every InstantSearch library.

When you try to style a specific widget you have to wrap it into a div with a classname. It would be easier to have class property applied to the widget.

Hello,

I want to be able to put my facets in a select multiple, or at least in a ng-template like the results, is there already a way to do this ?

Regards,

Actually there is no way to have the control on the generated markup, you cannot bind click events on the DOM generated from the widgets as well.

This is an issue for advanced users, when they want to integrate Angular InstantSearch with a CSS framework for instance. Or they want to track clicks on the widgets to fire a Google analytics event.

We need to expose, like for the other InstantSearch libraries a set of connectors in order to answer these use cases.

Markup is incorrect so the styling is not perfect, https://instantsearch-css.netlify.com/widgets/search-box/

• Find out different usages
• Write guides

Discussion with the team to stick to the core Algolia API speaking of Hits everywhere.

Is there an example somewhere how to unit test a component with InstantSearch?

Right now I get errors setting up the test:

Error: 
Usage: instantsearch({
  appId: 'my_application_id',
  apiKey: 'my_search_api_key',
  indexName: 'my_index_name'
});
    at new InstantSearch (webpack:///./node_modules/instantsearch.js/es/lib/InstantSearch.js?:91:13)
    at Factory (webpack:///./node_modules/to-factory/to-factory.js?:10:12)
    at NgAisInstantSearch.createInstantSearchInstance (webpack:///./node_modules/angular-instantsearch/bundles/angular-instantsearch.esm.js?:148:114)
    at NgAisInstantSearch.ngOnInit (webpack:///./node_modules/angular-instantsearch/bundles/angular-instantsearch.esm.js?:119:14)
    at checkAndUpdateDirectiveInline (webpack:///./node_modules/@angular/core/esm5/core.js?:12581:19)
    at checkAndUpdateNodeInline (webpack:///./node_modules/@angular/core/esm5/core.js?:14105:20)
    at checkAndUpdateNode (webpack:///./node_modules/@angular/core/esm5/core.js?:14048:16)
    at debugCheckAndUpdateNode (webpack:///./node_modules/@angular/core/esm5/core.js?:14941:76)
    at debugCheckDirectivesFn (webpack:///./node_modules/@angular/core/esm5/core.js?:14882:13)
    at Object.eval [as updateDirectives] (ng:///DynamicTestModule/FactoriesComponent.ngfactory.js:636:5)

Use case requested from a customer, having two searches for two different indices on the same page.

• Hits
• InfiniteHits
• RefinementList with search

POC: Create a Highlight component like react-instantsearch? Or use the same strategy as InstantSearch.js?

• CurrentRefinedValues

  • add transformData / transformItems

• HierarchicalMenu

  • rename showMore options to limitMin && limitMax (first add showMore on is.js)
  • add transformData / transformItems

• Hits

  • add transformData / transformItems

• Menu

  • add transformData / transformItems
  • rename showMore options to limitMin && limitMax
  • add withSearchBox to allow search (see with @ronanlevesque about DOM output)

• RefinementList

  • rename showMore options to limitMin && limitMax
  • add transformData / transformItems
  • add withSearchBox to allow search (see with @ronanlevesque about DOM output)

• SearchBox

  • allow binding of on* events

• StarRating

  • add min option (might have to be done into instantsearch.js connectors first)

Some options name might change next week, just implement the features first 👍

I am trying to programmatically update the cache in my component.

Html

<button (click)="updateCache()">update<button>
<ng-ais-instantsearch [config]="algoliaEnv" >
<ng-ais-search-box></ng-ais-search-box>
<ng-ais-hits></ng-ais-hits>

Component

this.algoliaEnv = {
      apiKey: <api-key>,
      appId: <app-id>,
      indexName: <index-name>,
      createAlgoliaClient: this.testFunction,
};

testFunction(customClient: Function, appId: string, apiKey: string) {
  // How do I use customClient here ?
  const algoliaSearch: algoliasearch.AlgoliaClient = customClient(appId, apiKey);
  return algoliaSearch;
}

updateCache(){
  // What should I call here?
}

The above code does not throw any errors, but I am trying to figure out how to update the cache programmatically, for example inside the updateCache method.
The documentation states: "We forward algoliasearch which is the original algoliasearch module imported inside angular-instantsearch." - but how do I use this?

I really hope you can help me out here :)

Hi guys,
so using a provider component approach is a bit too react for Angular IMHO, it clutters the code base. All the config option would be better served in the forRoot() call when initializing the app module.

tsconfig to reproduce:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "strictNullChecks": true,
    "noStrictGenericChecks": false,
    "skipLibCheck": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

ERROR in node_modules/angular-instantsearch/hits/hits.d.ts.NgAisHits.html(2,10): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/search-box/search-box.d.ts.NgAisSearchBox.html(2,10): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/search-box/search-box.d.ts.NgAisSearchBox.html(4,9): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/search-box/search-box.d.ts.NgAisSearchBox.html(9,11): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/search-box/search-box.d.ts.NgAisSearchBox.html(23,11): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/search-box/search-box.d.ts.NgAisSearchBox.html(29,13): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/search-box/search-box.d.ts.NgAisSearchBox.html(39,11): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/search-box/search-box.d.ts.NgAisSearchBox.html(45,13): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/pagination/pagination.d.ts.NgAisPagination.html(2,10): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/pagination/pagination.d.ts.NgAisPagination.html(3,11): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/sort-by/sort-by.d.ts.NgAisSortBy.html(2,10): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/sort-by/sort-by.d.ts.NgAisSortBy.html(4,9): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/numeric-selector/numeric-selector.d.ts.NgAisNumericSelector.html(2,10): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/numeric-selector/numeric-selector.d.ts.NgAisNumericSelector.html(4,9): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/stats/stats.d.ts.NgAisStats.html(2,10): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/toggle/toggle.d.ts.NgAisToggle.html(2,10): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/toggle/toggle.d.ts.NgAisToggle.html(3,11): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/toggle/toggle.d.ts.NgAisToggle.html(5,11): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/toggle/toggle.d.ts.NgAisToggle.html(7,18): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/toggle/toggle.d.ts.NgAisToggle.html(9,15): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/toggle/toggle.d.ts.NgAisToggle.html(15,19): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/toggle/toggle.d.ts.NgAisToggle.html(19,19): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/infinite-results/infinite-results.d.ts.NgAisInfiniteResults.html(2,10): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/infinite-results/infinite-results.d.ts.NgAisInfiniteResults.html(19,9): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/range-slider/range-slider.d.ts.NgAisRangeSlider.html(2,10): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/range-slider/range-slider.d.ts.NgAisRangeSlider.html(3,12): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/range-input/range-input.d.ts.NgAisRangeInput.html(2,10): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/range-input/range-input.d.ts.NgAisRangeInput.html(4,9): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/range-input/range-input.d.ts.NgAisRangeInput.html(8,16): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/range-input/range-input.d.ts.NgAisRangeInput.html(9,17): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/range-input/range-input.d.ts.NgAisRangeInput.html(11,13): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/range-input/range-input.d.ts.NgAisRangeInput.html(22,15): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/range-input/range-input.d.ts.NgAisRangeInput.html(24,16): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/range-input/range-input.d.ts.NgAisRangeInput.html(25,17): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/range-input/range-input.d.ts.NgAisRangeInput.html(27,13): : Object is possibly 'undefined'.
node_modules/angular-instantsearch/range-input/range-input.d.ts.NgAisRangeInput.html(39,11): : Object is possibly 'undefined'.

The CHANGELOG.md is not updated on release but it should.