API Reference

---

API Reference / @dasch-ng/json-viewer / JsonViewerComponent

Class: JsonViewerComponent

Defined in: json-viewer.component.ts:45

A modern Angular component for displaying JSON data in an interactive tree view.

Remarks

This component provides syntax highlighting, collapsible nodes, and circular reference detection. It's built as a standalone component with signal-based inputs for optimal performance.

Examples

Basic usage:

import { JsonViewerComponent } from '@dasch-ng/json-viewer';

@Component({
  template: `<json-viewer [json]="data" />`
})
export class MyComponent {
  data = { name: 'John', age: 30 };
}

With configuration:

<json-viewer
  [json]="complexData"
  [expanded]="false"
  [depth]="3"
/>

Constructors

Constructor

new JsonViewerComponent(): JsonViewerComponent

Returns

JsonViewerComponent

Properties

_currentDepth

readonly _currentDepth: InputSignalWithTransform<number, unknown>

Defined in: json-viewer.component.ts:107

Internal

• Used for recursive depth tracking

---

depth

readonly depth: InputSignalWithTransform<number, unknown>

Defined in: json-viewer.component.ts:104

Maximum depth level to automatically expand.

Remarks

Controls how many levels deep the tree will be expanded by default:

• -1: Expand all levels (unlimited depth)
• 0: Collapse everything
• n > 0: Expand only the first n levels

This works in conjunction with the expanded input. If expanded is false, this setting has no effect.

Default Value

-1 (unlimited)

Example

Expand only the first 3 levels:

<json-viewer [json]="data" [depth]="3" />

---

expanded

readonly expanded: InputSignalWithTransform<boolean, unknown>

Defined in: json-viewer.component.ts:82

Controls whether all nodes are expanded by default.

Remarks

When true, all expandable nodes (objects and arrays) will be shown in their expanded state. When false, all nodes start collapsed. Users can still toggle individual nodes by clicking on them.

Default Value

true

Example

Start with all nodes collapsed:

<json-viewer [json]="data" [expanded]="false" />

---

json

readonly json: InputSignalWithTransform<unknown, unknown>

Defined in: json-viewer.component.ts:64

The JSON data to display in the viewer.

Remarks

This is a required input. The component automatically handles circular references by converting them to $ref placeholders during processing.

Accepts any valid JavaScript value including:

• Objects and arrays
• Primitives (string, number, boolean, null, undefined)
• Dates and functions
• Circular references (automatically detected and handled)

Example

<json-viewer [json]="myData" />

---

segments

segments: Signal<Segment[]>

Defined in: json-viewer.component.ts:123

Internal

Computed signal containing the parsed and segmented JSON data.

Remarks

This signal automatically updates when the input JSON changes. Each segment represents a key-value pair with metadata about its type, value, and expansion state.

Returns

An array of Segment objects representing the JSON structure

This is computed automatically from the json input

Methods

toggle()

toggle(segment): void

Defined in: json-viewer.component.ts:152

Toggles the expansion state of a segment (node) in the tree.

Parameters

segment

Segment

The segment to toggle

Returns

void

Remarks

This method is called when a user clicks on an expandable node (object or array). It updates the internal expansion state and the segment's expanded property. Only expandable segments (objects and arrays) can be toggled.

Example

This is typically called from the template when a user clicks on a node:

<div (click)="toggle(segment)">...</div>