Add click functionality

README.md

@@ -41,3 +41,26 @@ To collapse all nodes at first:
 ```html
 <ngx-json-viewer [json]="someObject" [expanded]="false"></ngx-json-viewer>
 ```
+
+To make the segment clickable
+
+HTML
+```html
+<ngx-json-viewer [json]="someObject" 
+    [isSegmentClickable]="isClickable"
+    (segmentClicked)="segmentClickHandler($event)"></ngx-json-viewer>
+```
+TS
+```typescript
+const someObject = {users:[{id:123, name:"user1"},{id:234, name:"user2"}]};
+
+function isClickable(segment:NgxJsonSegment):boolean{
+    return segment.path === "users.0.id";
+}
+function segmentClickHandler(segment:NgxJsonSegment){
+    if (segment.path === "users.0.id"){
+        console.log(`the userId is ${segment.value}`);
+    }
+}
+```
+

index.ts

@@ -1,2 +1,2 @@
 export { NgxJsonViewerModule } from "./src/ngx-json-viewer.module";
-export { NgxJsonViewerComponent } from "./src/ngx-json-viewer/ngx-json-viewer.component";
+export { NgxJsonViewerComponent, NgxJsonSegment } from "./src/ngx-json-viewer/ngx-json-viewer.component";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-json-viewer",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "JSON formatter / viewer for Angular 2/4/5/6/7+",
   "keywords": [
     "angular",

src/ngx-json-viewer/ngx-json-viewer.component.html

@@ -12,10 +12,23 @@
       <div *ngIf="isExpandable(segment)" class="toggler"></div>
       <span class="segment-key">{{ segment.key }}</span>
       <span class="segment-separator">: </span>
-      <span *ngIf="!segment.expanded || !isExpandable(segment)" class="segment-value">{{ segment.description }}</span>
+      <ng-container *ngIf="!segment.expanded || !isExpandable(segment)">
+        <div *ngIf="isClickable(segment); then clickableDesc else noClickableDesc"></div>
+        <ng-template #clickableDesc>
+          <a class="segment-value" (click)="segmentClickHandler(segment)">{{ segment.description }}</a>
+        </ng-template>
+        <ng-template #noClickableDesc>
+          <span class="segment-value">{{ segment.description }}</span>
+        </ng-template>
+      </ng-container>
     </section>
     <section *ngIf="segment.expanded && isExpandable(segment)" class="children">
-      <ngx-json-viewer [json]="segment.value" [expanded]="expanded"></ngx-json-viewer>
+      <ngx-json-viewer [json]="segment.value"
+                       [expanded]="expanded"
+                       [_parent]="segment"
+                       [isSegmentClickable]="isSegmentClickable"
+                       (segmentClicked)="segmentClickHandler($event)"></ngx-json-viewer>
     </section>
   </section>
 </section>
+

src/ngx-json-viewer/ngx-json-viewer.component.scss

@@ -92,4 +92,8 @@ $type-colors: (
   .expandable > .toggler {
     cursor: pointer;
   }
+  a{
+    cursor: pointer;
+    text-decoration: underline;
+  }
 }

src/ngx-json-viewer/ngx-json-viewer.component.ts

@@ -1,13 +1,17 @@
-import { Component, OnChanges, Input } from '@angular/core';
+import {Component, OnChanges, Input, Output, EventEmitter} from '@angular/core';
 
-export interface Segment {
+export interface NgxJsonSegment {
+  parent: NgxJsonSegment | undefined;
   key: string;
   value: any;
   type: undefined | string;
   description: string;
   expanded: boolean;
+  path: string;
 }
 
+type IsSegmentClickableFn = (segment: NgxJsonSegment) => boolean;
+
 @Component({
   selector: 'ngx-json-viewer',
   templateUrl: './ngx-json-viewer.component.html',
@@ -21,35 +25,48 @@ export class NgxJsonViewerComponent implements OnChanges {
    * @deprecated It will be always true and deleted in version 3.0.0
    */
   @Input() cleanOnChange = true;
+  @Input() isSegmentClickable: IsSegmentClickableFn;
+  @Input() _parent: NgxJsonSegment | undefined = undefined;
+  @Output() segmentClicked = new EventEmitter<NgxJsonSegment>();
 
-  segments: Segment[] = [];
+  segments: NgxJsonSegment[] = [];
 
   ngOnChanges() {
     if (this.cleanOnChange) {
       this.segments = [];
     }
 
     if (typeof this.json === 'object') {
-      Object.keys(this.json).forEach( key => {
+      Object.keys(this.json).forEach(key => {
         this.segments.push(this.parseKeyValue(key, this.json[key]));
       });
     } else {
       this.segments.push(this.parseKeyValue(`(${typeof this.json})`, this.json));
     }
   }
 
-  isExpandable(segment: Segment) {
+  isExpandable(segment: NgxJsonSegment) {
     return segment.type === 'object' || segment.type === 'array';
   }
 
-  toggle(segment: Segment) {
+  toggle(segment: NgxJsonSegment) {
     if (this.isExpandable(segment)) {
       segment.expanded = !segment.expanded;
     }
   }
 
-  private parseKeyValue(key: any, value: any): Segment {
-    const segment: Segment = {
+  segmentClickHandler(segment: NgxJsonSegment) {
+    this.segmentClicked.emit(segment);
+  }
+
+  isClickable(segment: NgxJsonSegment): boolean {
+    return this.isSegmentClickable && this.isSegmentClickable(segment);
+  }
+
+  private parseKeyValue(key: any, value: any): NgxJsonSegment {
+    const segment: NgxJsonSegment = {
+      parent: this._parent,
+      path: this._parent ? `${this._parent.path}.${key}` : key,
       key: key,
       value: value,
       type: undefined,