fix(json-view): keep nested items collapsed on toggle regardless of initial levelOpen

Author: HitkoDev

packages/demo/src/app/json-view/documentation.json

@@ -174,7 +174,7 @@
     "components": [
         {
             "name": "JsonViewComponent",
-            "id": "component-JsonViewComponent-43a4e5de5f43e9cf40f2a8c9c997b2d7f0ab8c0c8b2acc253f3709e593ff92052ea3c7c2becb5bbc7dbb7772881216104020c6e01e4aae4eac86db82f3a44b42",
+            "id": "component-JsonViewComponent-3d4c50ecdb32724dd421ad99a55459f18bc168517311d9dd4f2217f0c87c48b338ebcfcc872944eea4f78776b6876cd420304519630b9bc81326c230b976b27b",
             "file": "src/lib/json-view/json-view.component.ts",
             "encapsulation": [
                 "ViewEncapsulation.Emulated"
@@ -223,8 +223,8 @@
                     "name": "levelOpen",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\nInitial number of levels to be expanded",
-                    "description": "<p>Initial number of levels to be expanded</p>\n",
+                    "rawdescription": "\nInitial number of levels to be expanded; to expand / collapse the view after initial render, use `expandTo` / `collapseTo`",
+                    "description": "<p>Initial number of levels to be expanded; to expand / collapse the view after initial render, use <code>expandTo</code> / <code>collapseTo</code></p>\n",
                     "line": 22,
                     "type": "number",
                     "decorators": []
@@ -246,7 +246,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 35,
+                    "line": 44,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nCollapse any open items above the given level",
@@ -276,7 +276,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 29,
+                    "line": 38,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\nExpand all items up to the given level",
@@ -292,6 +292,16 @@
                             }
                         }
                     ]
+                },
+                {
+                    "name": "ngAfterViewChecked",
+                    "args": [],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 29,
+                    "deprecated": false,
+                    "deprecationMessage": ""
                 }
             ],
             "deprecated": false,
@@ -304,7 +314,10 @@
             "rawdescription": "\n",
             "type": "component",
             "assetsDirs": [],
-            "extends": []
+            "extends": [],
+            "implements": [
+                "AfterViewChecked"
+            ]
         }
     ],
     "modules": [

packages/json-view/src/lib/json-view/json-view.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, Input, ViewEncapsulation } from '@angular/core'
+import { AfterViewChecked, ChangeDetectorRef, Component, inject, Input, ViewEncapsulation } from '@angular/core'
 import { LevelLabels } from '../utils/interfaces'
 import { ExpanderService } from '../expander/expander.service'
 
@@ -15,7 +15,7 @@ import { ExpanderService } from '../expander/expander.service'
         }
     ]
 })
-export class JsonViewComponent {
+export class JsonViewComponent implements AfterViewChecked {
     /** JSON data, any valid JSON object */
     @Input() data: any
     /** Initial number of levels to be expanded; to expand / collapse the view after initial render, use `expandTo` / `collapseTo` */
@@ -24,6 +24,15 @@ export class JsonViewComponent {
     @Input() levelLabels?: LevelLabels
 
     private readonly expanderService = inject(ExpanderService)
+    private readonly cdRef = inject(ChangeDetectorRef)
+
+    ngAfterViewChecked(): void {
+        if (this.levelOpen != undefined) {
+            // Reset levelOpen to keep nested items collapsed when toggling
+            this.levelOpen = undefined
+            this.cdRef.detectChanges()
+        }
+    }
 
     /** Expand all items up to the given level */
     expandTo(level: number) {