fix(angular): resolve capitalization binding and DataContext integration

- update DataContext instantiation in button.component.ts to pass surface
- fix function aggregation in DemoCatalog (array-based)
- use web_core effect in utils.ts to ensure single source of truth
- add unit test for capitalization function binding
- exclude tests in tsconfig.app.json to fix compilation scopes
- remove temporary verification script

Author: gspencergoog

renderers/angular/demo-app/src/app/demo-catalog.ts

@@ -54,12 +54,13 @@ export class DemoCatalog extends MinimalCatalog {
     const components = Array.from(this.components.values());
     components.push(customSliderApi, cardApi);
 
-    const functions = {
+    const functions = [
       ...BASIC_FUNCTIONS,
-      ...Object.fromEntries(this.functions?.entries() || []),
-    };
+      ...Array.from(this.functions?.values() || []),
+    ];
+
     (this as any).components = new Map(components.map((c) => [c.name, c]));
-    (this as any).functions = new Map(Object.entries(functions));
+    (this as any).functions = new Map(functions.map((f) => [f.name, f]));
     (this as any).id = 'https://a2ui.org/specification/v0_9/catalogs/minimal/minimal_catalog.json';
   }
 }

renderers/angular/demo-app/src/app/examples-bundle.ts

@@ -295,7 +295,7 @@ export const EXAMPLES = [
             {
               id: 'root',
               component: 'Column',
-              children: ['input_field', 'result_label', 'result_text'],
+              children: ['input_field', 'result_label', 'result_text', 'submit_button'],
               justify: 'start',
               align: 'stretch',
             },
@@ -328,6 +328,32 @@ export const EXAMPLES = [
               },
               variant: 'h2',
             },
+            {
+              id: 'submit_button',
+              component: 'Button',
+              child: 'submit_label',
+              variant: 'primary',
+              action: {
+                event: {
+                  name: 'capitalized_submit',
+                  context: {
+                    value: {
+                      call: 'capitalize',
+                      args: {
+                        value: {
+                          path: '/inputValue',
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+            {
+              id: 'submit_label',
+              component: 'Text',
+              text: 'Submit',
+            },
           ],
         },
       },

renderers/angular/demo-app/tsconfig.app.json

@@ -10,6 +10,6 @@
     "rootDir": "../"
   },
   "include": ["src/**/*.ts", "../src/lib/v0_9/**/*.ts"],
-  "exclude": ["src/**/*.spec.ts"]
+  "exclude": ["src/**/*.spec.ts", "../src/**/*.spec.ts"]
 }
 

renderers/angular/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "ng build && node postprocess-build.mjs",
     "demo": "ng serve demo-app",
-    "regression-test": "node verify_capitalization.js"
+    "test": "ng test lib --watch=false"
   },
   "dependencies": {
     "@a2ui/web_core": "file:../web_core",

renderers/angular/src/lib/v0_9/catalog/minimal/button.component.ts

@@ -81,9 +81,8 @@ export class ButtonComponent {
       const surface = this.rendererService.surfaceGroup?.getSurface(this.surfaceId);
       if (surface) {
         const dataContext = new DataContext(
-          surface.dataModel,
+          surface,
           this.dataContextPath,
-          surface.catalog.invoker,
         );
         const resolvedAction = dataContext.resolveAction(action);
         surface.dispatchAction(resolvedAction);

renderers/angular/src/lib/v0_9/core/a2ui-renderer.service.spec.ts

@@ -26,6 +26,14 @@ describe('A2uiRendererService', () => {
     mockCatalog = {
       components: new Map(),
       functions: new Map(),
+      get invoker() {
+        return (name: string, args: any, ctx: any, ab?: any) => {
+          const fn = mockCatalog.functions.get(name);
+          if (fn) return fn(args, ctx, ab);
+          console.warn(`Function "${name}" not found in catalog`);
+          return undefined;
+        };
+      }
     };
 
     TestBed.configureTestingModule({

renderers/angular/src/lib/v0_9/core/capitalization_binding.spec.ts

@@ -0,0 +1,68 @@
+/**
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { TestBed } from '@angular/core/testing';
+import { DataModel, SurfaceModel, DataContext } from '@a2ui/web_core/v0_9';
+import { MinimalCatalog } from '../catalog/minimal/minimal-catalog';
+import { toAngularSignal } from './utils';
+import { DestroyRef } from '@angular/core';
+
+describe('Capitalize Function Binding', () => {
+  let mockDestroyRef: jasmine.SpyObj<DestroyRef>;
+
+  beforeEach(() => {
+    mockDestroyRef = jasmine.createSpyObj('DestroyRef', ['onDestroy']);
+    mockDestroyRef.onDestroy.and.returnValue(() => {});
+  });
+
+  it('should update output correctly when bound input updates using function call binding', () => {
+    const catalog = new MinimalCatalog();
+    
+    // Create Surface Model and DataContext
+    const surface = new SurfaceModel('surface_1', catalog);
+    const dataModel = surface.dataModel;
+    const context = new DataContext(surface, '/');
+
+    const callValue = {
+      call: 'capitalize',
+      args: {
+        value: {
+          path: '/inputValue'
+        }
+      },
+      returnType: 'string'
+    };
+
+    // 1. Resolve Signal
+    const resSig = context.resolveSignal<string>(callValue as any);
+
+    // 2. Convert to Angular Signal
+    const angSig = toAngularSignal(resSig, mockDestroyRef);
+
+    // 3. Initial state
+    expect(angSig()).toBe('');
+
+    // 4. Update data model Simulation typing
+    dataModel.set('/inputValue', 'regression test');
+
+    // 5. Verify reactive updates
+    expect(angSig()).toBe('Regression test');
+
+    // 6. Update again to confirm reactive stream remains healthy
+    dataModel.set('/inputValue', 'another test');
+    expect(angSig()).toBe('Another test');
+  });
+});

renderers/angular/src/lib/v0_9/core/component-host.component.spec.ts

@@ -48,6 +48,7 @@ describe('ComponentHostComponent', () => {
       componentsModel: new Map([
         ['comp1', { id: 'comp1', type: 'TestType', properties: { text: 'Hello' } }],
       ]),
+      catalog: { invoker: jasmine.createSpy('invoker').and.returnValue('result') },
     };
 
     mockSurfaceGroup = {
@@ -64,7 +65,7 @@ describe('ComponentHostComponent', () => {
     };
 
     mockBinder = jasmine.createSpyObj('ComponentBinder', ['bind']);
-    mockBinder.bind.and.returnValue({ text: 'bound-hello' });
+    mockBinder.bind.and.returnValue({ text: { value: () => 'bound-hello', onUpdate: () => {} } as any });
 
     await TestBed.configureTestingModule({
       imports: [ComponentHostComponent],
@@ -92,7 +93,7 @@ describe('ComponentHostComponent', () => {
       // @ts-ignore - Accessing protected property
       expect(component.componentType).toBe(TestChildComponent);
       // @ts-ignore - Accessing protected property
-      expect(component.props).toEqual({ text: 'bound-hello' });
+      expect(component.props).toEqual({ text: jasmine.objectContaining({ value: jasmine.any(Function) }) as any });
 
       expect(mockSurfaceGroup.getSurface).toHaveBeenCalledWith('surf1');
       expect(mockBinder.bind).toHaveBeenCalled();

renderers/angular/src/lib/v0_9/core/utils.ts

@@ -15,7 +15,7 @@
  */
 
 import { DestroyRef, Signal, signal as angularSignal } from '@angular/core';
-import { Signal as PreactSignal, effect } from '@preact/signals-core';
+import { Signal as PreactSignal, effect } from '@a2ui/web_core/v0_9';
 
 /**
  * Bridges a Preact Signal to an Angular Signal.
@@ -27,16 +27,14 @@ import { Signal as PreactSignal, effect } from '@preact/signals-core';
  */
 import { NgZone } from '@angular/core';
 
-const preactEffect = (window as any).webCoreSignals?.effect || effect;
-
 export function toAngularSignal<T>(
   preactSignal: PreactSignal<T>,
   destroyRef: DestroyRef,
   ngZone?: NgZone,
 ): Signal<T> {
   const s = angularSignal(preactSignal.peek());
 
-  const dispose = preactEffect(() => {
+  const dispose = effect(() => {
     if (ngZone) {
       ngZone.run(() => s.set(preactSignal.value));
     } else {