> For the complete documentation index, see [llms.txt](https://docs.fact-finder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fact-finder.com/webcomponents-overview/web-components-4.x./api/more-features/compare.md).

# Compare

Render product comparisons and highlight differences.

## Documentation

### Overview

Use `ff-compare` to display records with additional information and styling for fields that differ. Nest an `ff-record-list` to render and style compared products. This record list does not listen to default search results. It receives records from the compare service.

```html
<ff-compare>
    <ff-record-list>
        <ff-record>
            <!-- Implement record presentation here. -->
        </ff-record>
    </ff-record-list>
</ff-compare>
```

## Demo

Try the [Compare demo](https://search-web-components.fact-finder.de/demos/4.x/ff-compare).

## API code

### Properties

<details>

<summary>Properties</summary>

| Name                                                                            | Description                                                                                                                                                                |
| ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **record-id** (Array)                                                           | The record IDs of the products to compare.                                                                                                                                 |
| **max-results** (Number) (default: 4)                                           | The maximum amount of dispatched records.                                                                                                                                  |
| **subscribe** (String) **Options**: `"true"`, `"false"` (default: `"true"`)     | If set to `"false"`, the element no longer listens to events and therefore does not receive new data. This is useful if you want to dispatch your own data to the element. |
| **auto-compare** (String) **Options**: `"true"`, `"false"` (default: `"false"`) | If set to `"true"`, the request to the compare service will be automatically triggered when the attribute `record-id` is changed.                                          |

</details>

### Methods

<details>

<summary>Methods</summary>

| Name                          | Description                                                                       |
| ----------------------------- | --------------------------------------------------------------------------------- |
| **compareRecords(recordIds)** | This method triggers a request to the Compare Service with the given `recordIds`. |

</details>

### Attributes

**`max-results`**

`max-results` defines how many records the component dispatches to `ff-record-list`. It defaults to `4`.

```html
<ff-compare max-results="6">
    <ff-record-list>
        <ff-record><!-- Implement record presentation here. --></ff-record>
    </ff-record-list>
</ff-compare>
```

**`record-id`**

Set a comma-separated list of record IDs with `record-id` to trigger the compare service. Set IDs through JavaScript after a user selects records.

```html
<ff-compare record-id="1001,1002,1003">
    <ff-record-list>
        <ff-record><!-- Implement record presentation here. --></ff-record>
    </ff-record-list>
</ff-compare>

<script>
    function compare() {
        document.querySelector("ff-compare").recordId = [1001, 1002, 1003];
    }
</script>
```

**`subscribe`**

Use `subscribe` to control whether `ff-compare` listens to the compare service. It defaults to `true`.

```html
<ff-compare subscribe="false">
    <ff-record-list>
        <ff-record><!-- Implement record presentation here. --></ff-record>
    </ff-record-list>
</ff-compare>
```

**`auto-compare`**

`auto-compare` controls whether the compare service runs automatically after record IDs change. It defaults to `true`. Set it to `false` and call `compareRecords()` for manual control.

```html
<ff-compare auto-compare="false">
    <ff-record-list>
        <ff-record><!-- Implement record presentation here. --></ff-record>
    </ff-record-list>
</ff-compare>

<script>
    function compare() {
        const myRecordIds = [1001, 1002, 1003];
        const compareElement = document.querySelector("ff-compare");

        // Does not trigger the compare service.
        compareElement.recordId = myRecordIds;

        // Triggers the compare service.
        compareElement.compareRecords(myRecordIds);
    }
</script>
```

### Styling

**Comparing attributes**

Add `data-attribute="fieldName"` to an element inside the record list. After comparison, differing fields receive `ffw-compare-diff`. Matching fields receive `ffw-compare-equal`. If the service has no result for a field, all `ffw-compare-*` classes are removed.

```html
<style>
    .ffw-compare-diff {
        color: red;
    }
</style>
<ff-compare>
    <ff-record-list>
        <ff-record>
            <h2>{{record.Title}}</h2>
            <div data-attribute="Price">Price: {{record.Price}}</div>
        </ff-record>
    </ff-record-list>
</ff-compare>
```

**Mustache rendering**

The compare result adds a `diff` property to each dispatched record. Use Mustache sections to render different markup:

```html
<ff-compare>
    <ff-record-list>
        <ff-record>
            <h2>{{record.Title}}</h2>
            {{#diff.Price}}
                <div style="color:red">Price: {{record.Price}}</div>
            {{/diff.Price}}
            {{^diff.Price}}
                <div style="color:green">Price: {{record.Price}}</div>
            {{/diff.Price}}
        </ff-record>
    </ff-record-list>
</ff-compare>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.fact-finder.com/webcomponents-overview/web-components-4.x./api/more-features/compare.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.