ngx-json-treeview/index.d.ts

A simple Angular component to display object data in an expandable JSON tree view.

import * as _angular_core from '@angular/core';

/**
 * Represents a segment (node) within the JSON tree structure.
 * Each segment corresponds to a key-value pair in an object, an item in an
 * array, or the root value itself, providing context and state for rendering.
 */
interface Segment {
    /** The key (for objects) or index (for arrays). */
    key: string;
    /** The actual JavaScript value represented by this segment. */
    value: any;
    /** The JavaScript data type of the value. */
    type?: string;
    /** A string representation of the value, used for display purposes. */
    description: string;
    /** Indicates whether the segment is expanded in the UI. */
    expanded: boolean;
    /** A reference to the parent segment in the JSON tree. Undefined for root. */
    parent?: Segment;
    /**
     * A dot/bracket notation path string to this specific segment
     * (e.g., 'settings.notifications.email', 'items[1].value').
     */
    path: string;
}
type IsClickableValueFn = (segment: Segment) => boolean;
/**
 * Renders JSON data in an expandable and collapsible tree structure.
 * Allows users to navigate complex data hierarchies visually.
 */
declare class NgxJsonTreeviewComponent {
    /**
     * The JSON object or array to display in the tree view.
     * @required
     */
    json: _angular_core.InputSignal<any>;
    /**
     * Controls the default expansion state for all expandable segments
     * i.e. objects and arrays.
     * - If `true`, nodes are expanded down to the specified `depth`.
     * - If `false`, all nodes start collapsed.
     * @default true
     */
    expanded: _angular_core.InputSignal<boolean>;
    /**
     * Determines the maximum nesting level automatically expanded when `expanded`
     * is `true`.
     * - `-1`: Infinite depth (all levels expanded).
     * - `0`: Only the root node is expanded (if applicable).
     * - `n`: Root and nodes down to `n` levels are expanded.
     * @default -1
     */
    depth: _angular_core.InputSignal<number>;
    /**
     * If `true`, value nodes will emit an `onValueClick` event when clicked. This
     * allows for some interesting use cases, such as:
     * - Rendering preformatted text, html, markdown, etc in another component.
     * - Copying a value to the clipboard.
     * - Following hyperlinks, etc
     * @default false
     */
    enableClickableValues: _angular_core.InputSignal<boolean>;
    /**
     * A function that determines if a specific value node should be considered
     * clickable. This provides more granular control than the global
     * `enableClickableValues` flag.
     *
     * The function receives the `Segment` object and should return `true` if the
     * value is clickable, `false` otherwise. This check is only performed if
     * `enableClickableValues` is also `true`.
     *
     * @param segment - The segment being evaluated.
     * @returns `true` if the segment's value should be clickable, `false`
     * otherwise.
     * @default () => true - By default, all values are considered clickable if
     *   `enableClickableValues` is true.
     */
    isClickableValue: _angular_core.InputSignal<IsClickableValueFn>;
    /**
     * If `enableClickableValues` is set to `true`, emits a `Segment` object when
     * a value node is clicked. The emitted `Segment` contains details about the
     * clicked node (key, value, type, path, etc.).
     */
    onValueClick: _angular_core.OutputEmitterRef<Segment>;
    /**
     * *Internal* input representing the parent segment in the tree hierarchy.
     * Primrily used for calculating paths.
     * @internal
     */
    _parent: _angular_core.InputSignal<Segment | undefined>;
    /**
     * *Internal* input representing the current nesting depth. Used in
     * conjunction with the `depth` input to control expansion.
     * @internal
     */
    _currentDepth: _angular_core.InputSignal<number>;
    rootType: _angular_core.Signal<string>;
    segments: _angular_core.Signal<Segment[]>;
    isExpanded: _angular_core.Signal<boolean>;
    openingBrace: _angular_core.Signal<string>;
    closingBrace: _angular_core.Signal<string>;
    asString: _angular_core.Signal<string>;
    primativeSegmentClass: _angular_core.Signal<string>;
    isArrayElement: _angular_core.Signal<boolean>;
    isExpandable(segment: Segment): boolean;
    isEmpty(segment: Segment): boolean;
    isClickable(segment: Segment): boolean;
    toggle(segment: Segment): void;
    onValueClickHandler(segment: Segment): void;
    openingBraceForSegment(segment: Segment): "[" | "{" | undefined;
    closingBraceForSegment(segment: Segment): "]" | "}" | undefined;
    private getPath;
    private parseKeyValue;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxJsonTreeviewComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxJsonTreeviewComponent, "ngx-json-treeview", never, { "json": { "alias": "json"; "required": true; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "depth": { "alias": "depth"; "required": false; "isSignal": true; }; "enableClickableValues": { "alias": "enableClickableValues"; "required": false; "isSignal": true; }; "isClickableValue": { "alias": "isClickableValue"; "required": false; "isSignal": true; }; "_parent": { "alias": "_parent"; "required": false; "isSignal": true; }; "_currentDepth": { "alias": "_currentDepth"; "required": false; "isSignal": true; }; }, { "onValueClick": "onValueClick"; }, never, never, true, never>;
}

export { NgxJsonTreeviewComponent };
export type { IsClickableValueFn, Segment };