display array indices as comments/labels instead of object keys (#22)

fixes #20

Author: MichaelDoyle

projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html

@@ -32,9 +32,17 @@
             @if (expandable) {
               <div class="toggler"></div>
             }
-            <span class="segment-key">{{ `"${segment.key}"` }}</span>
+            @if (isArrayElement()) {
+              <span class="segment-label">{{ segment.key }}</span>
+            } @else {
+              <span class="segment-key">{{ `"${segment.key}"` }}</span>
+            }
+          </span>
+          <span
+            [class.segment-label]="isArrayElement()"
+            [class.punctuation]="!isArrayElement()"
+            >:
           </span>
-          <span class="punctuation">: </span>
           @if (empty) {
             <span class="punctuation"
               >{{ openingBrace }}{{ closingBrace

projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.ts

@@ -152,6 +152,7 @@ export class NgxJsonTreeviewComponent {
     }
     return 'segment-type-' + type;
   });
+  isArrayElement = computed<boolean>(() => this.rootType() === 'array');
 
   isExpandable(segment: Segment) {
     return (