Import
import { ValueDiffDirectiveModule } from '@backbase/ui-ang/value-diff'
Usage
Use the bbValueDiff directive on any element to compare its original content with a new value. The directive will show both values with visual styling to highlight the differences.
<!-- Basic value diff usage -->
<div bbValueDiff="New Value">
Old Value
</div>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
bbValueDiff |
string |
'' |
|
position |
'before' | after |
'before' |
|
showArrow |
boolean |
false |
bbValueDiff
The bbValueDiff input sets the new value to compare against the element's original content.
<!-- Element with new value comparison -->
<div bbValueDiff="Updated Content">
Original Content
</div>
position
The position input sets where the new value will be displayed relative to the original content.
When position="before", the new value appears before the original content with a left-pointing arrow (if enabled). When position="after", the new value appears after the original content with a right-pointing arrow (if enabled).
<!-- New value appears before original -->
<div bbValueDiff="New Value" position="before" [showArrow]="true">
Old Value
</div>
<!-- New value displayed after original content -->
<div bbValueDiff="New Value" position="after">
Old Value
</div>
showArrow
The showArrow input displays an arrow between the old and new values to indicate the change direction.
<!-- Value diff with arrow indicator -->
<div bbValueDiff="New Value" [showArrow]="true">
Old Value
</div>
Visual styling
The directive automatically applies CSS classes to style the compared values:
- Original content receives bb-value-diff--crossed class (typically shown with strikethrough)
- New content receives bb-value-diff--highlighted class (typically shown with highlight styling)
- Arrow elements receive bb-value-diff--arrow-left or bb-value-diff--arrow-right classes based on position
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
The directive automatically adds screen reader-only text to provide context about value changes:
- "Previous value:" is added before the original content
- "Current value:" is added before the new content
- Both labels are hidden visually but available to screen readers
ARIA
These inputs support WAI-ARIA compliance and are intended to improve accessibility for users relying on assistive technologies. Use them to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state, or behavior.
|
Input |
Description |
Type |
|---|---|---|
|
sr-only-new |
Sets the screen reader text that describes the new value |
string |
|
sr-only-old |
Sets the screen reader text that describes the original value |
string |
Customize the accessibility labels for different languages or contexts:
<!-- Custom accessibility labels -->
<div
bbValueDiff="€1,250.00"
sr-only-old="Previous amount:"
sr-only-new="Updated amount:">
€1,000.00
</div>
Dynamic value changes
The directive automatically responds to changes in the input value:
<!-- Dynamic value updates -->
<div [bbValueDiff]="dynamicNewValue" [showArrow]="true">
{{ originalValue }}
</div>
// Component TypeScript
export class MyComponent {
originalValue = 'Initial Value';
dynamicNewValue = 'Updated Value';
updateValue() {
this.dynamicNewValue = 'Latest Value';
}
}
Types
export enum ValueDiffPosition {
BEFORE = 'before',
AFTER = 'after',
}