feat(devtools): add support for @for control flow blocks in directive explorer

- Handle @for data in tree strategies and view extraction
- Show @for details in the UI and property tab
- Persist @for state and update UI accordingly

Author: Avcharov

devtools/projects/ng-devtools-backend/src/lib/client-event-subscribers.ts

@@ -437,6 +437,7 @@ const prepareForestForSerialization = (
       children: prepareForestForSerialization(node.children, includeResolutionPath),
       hydration: node.hydration,
       defer: node.defer,
+      forLoop: node.forLoop,
       onPush: node.component ? isOnPushDirective(node.component) : false,
 
       // native elements are not serializable

devtools/projects/ng-devtools-backend/src/lib/directive-forest/BUILD.bazel

@@ -16,6 +16,7 @@ ts_project(
         "//devtools/projects/ng-devtools-backend/src/lib:utils",
         "//devtools/projects/ng-devtools-backend/src/lib:version",
         "//devtools/projects/ng-devtools-backend/src/lib/ng-debug-api",
+        "//devtools/projects/ng-devtools-backend/src/lib/state-serializer",
         "//devtools/projects/protocol",
     ],
 )

devtools/projects/ng-devtools-backend/src/lib/directive-forest/ltree.ts

@@ -92,6 +92,7 @@ export class LTreeStrategy {
         component: null,
         hydration: null, // We know there is no hydration if we use the LTreeStrategy
         defer: null, // neither there will be any defer
+        forLoop: null, // neither there will be any @for
       };
     }
     for (let i = tNode.directiveStart; i < tNode.directiveEnd; i++) {
@@ -118,6 +119,7 @@ export class LTreeStrategy {
       component,
       hydration: null, // We know there is no hydration if we use the LTreeStrategy
       defer: null, // neither there will be any defer
+      forLoop: null, // neither there will be any @for
     };
   }