CompareItem

Auxiliary piece of Compare

Compose Compare with two CompareItem children, one CompareIndicator and one CompareHandle. position="before" or "after" identifies each surface. Accept valueChange by assigning $event.value to the applied value; defaultValue is a fallback, not persistent local state. The indicator and handle inherit the parent orientation and position. They must remain inside Compare. Their projected content is application-owned.

Complete Compare guide

Examples

Try this application-owned interaction. Its event handling and initial data are included in Code.

Examples

Reset example

Demo Source

Before

After

Events: 0

Try and configure

Change the public options, try the result and inspect the updated template. Code contains the complete executable implementation.

Try and configure

Reset example

Demo Source

Before

After

Events: 0

orientation horizontal

disabledslideOnHover

step

Advanced options · 1

Behavior and content

position before

Structured data, callbacks and templates are shown in the examples and API.

Code adds advanced options when they differ from the default. Current configuration data and values appear in the template state.

template.html Copy code

<neu-compare
  class="remaining-compare"
  [value]="position()"
  (valueChange)="position.set($event.value)"
  (valueChangeEnd)="record('valueChangeEnd', $event.value)"
  [orientation]="'horizontal'"
  [disabled]="false"
  [slideOnHover]="false"
  [step]="5"
  ><neu-compare-item position="before"
    ><div class="remaining-compare-surface remaining-before remaining-compare-surface--image">
      <img class="remaining-compare-image" src="assets/media/coast.svg" [alt]="t('Coastal light before color adjustment', 'Luz de costa antes del ajuste de color')" width="800" height="450" draggable="false" />
      <span class="remaining-compare-caption">{{ t("Before", "Antes") }}</span>
    </div></neu-compare-item
  ><neu-compare-item position="after"
    ><div class="remaining-compare-surface remaining-after remaining-compare-surface--image">
      <img class="remaining-compare-image" src="assets/media/coast.svg" [alt]="t('Coastal light after color adjustment', 'Luz de costa después del ajuste de color')" width="800" height="450" draggable="false" />
      <span class="remaining-compare-caption">{{ t("After", "Después") }}</span>
    </div></neu-compare-item
  ><neu-compare-indicator
    ><span class="remaining-compare-line"></span></neu-compare-indicator
  ><neu-compare-handle
    [ariaLabel]="t('Compare position', 'Posición de comparación')"
    ></neu-compare-handle
  ></neu-compare
>

State and events

Compose Compare with two CompareItem children, one CompareIndicator and one CompareHandle. position="before" or "after" identifies each surface. Accept valueChange by assigning $event.value to the applied value; defaultValue is a fallback, not persistent local state. The indicator and handle inherit the parent orientation and position. They must remain inside Compare. Their projected content is application-owned.

Accessibility and keyboard

Focus CompareHandle with Tab. Arrow keys adjust the position; Home/End reach the limits. Pointer dragging proposes changes through the same Outputs.

API

Inputs, models and Outputs are extracted from the installed Core package. Named public types link to their definitions. Templates below include executable examples.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
* Projected content View example	Content projection Application-provided content.	<ng-content /> Context used: —

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

Projected content

*

Projected content

Reset example

Demo Source

Before

After

Events: 0

Public Types

Open a type to inspect its definition and interface fields.

import type { NeuCompareOrientation } from '@neural-ui/core/compare';

// Public declaration (reference only)
type NeuCompareOrientation = 'horizontal' | 'vertical';

import type { NeuCompareValueChangeEvent } from '@neural-ui/core/compare';

// Public declaration (reference only)
interface NeuCompareValueChangeEvent {
  originalEvent: Event;
  value: number;
}

Styles and tokens

Use the supported public tokens listed below. Surrounding layout belongs to your application; validate the result in light and dark modes and narrow containers.

Related components

Use related components when your task requires a different interaction or a composed control.

• Compare
• CompareHandle
• CompareIndicator