Port Angular Restaurant Sample to 0.9 and Stabilize Tests by josemontespg · Pull Request #1189 · google/A2UI

josemontespg · 2026-04-15T00:15:47Z

This PR ports the Angular restaurant sample app to version 0.9.

Credits to @gspencergoog for the first port attempt in #1101, I reused most of his work to create this PR.

Key Changes

Angular Renderer: Updated ComponentHostComponent to handle property updates reactively using Angular Signals.
Tests: Modernized tests in renderers/angular to use the real ComponentBinder service and formal ComponentModel instances instead of object-literal mocks.
Web Core: Minor updates to data-context.
Agent: Updated the restaurant finder agent and examples for 0.9.
Added client support for streaming responses.

Fixes #701

Screenshots

	Light	Dark
Single Column
Double Column

gemini-code-assist

Code Review

This pull request migrates the Angular renderer and the restaurant finder sample to version 0.9. Key updates include the implementation of reactive property updates and weight support in ComponentHostComponent, the addition of stable change detection in ListComponent, and a specialized path resolution logic in DataContext. The restaurant finder agent was also updated with a monkey patch for ADK compatibility and refined LLM instructions. Feedback focuses on ensuring the weight signal is updated during property changes, improving type safety by replacing any with specific models, addressing the impact of the new path resolution logic on global state access, and correcting the action handling in the client to ensure the backend receives the expected event format.

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

gemini-code-assist · 2026-04-15T00:17:24Z

renderers/web_core/src/v0_9/rendering/data-context.ts

  private resolvePath(path: string): string {
-    if (path.startsWith('/')) {
-      return path;
-    }
-    if (path === '' || path === '.') {
+    // In A2UI v0.9, all paths generated by the prompt-first LLM must begin with a leading `/`
+    // to satisfy RFC 6901 JSON Pointer validation.
+    // Thus, paths like `/imageUrl` are effectively relative to this DataContext.
+    let relPath = path.startsWith('/') ? path.substring(1) : path;


This change to resolvePath effectively disables absolute path resolution (paths starting with /) by treating them as relative to the current DataContext. While the comment explains this is to accommodate LLM behavior in v0.9, it breaks standard JSON Pointer expectations and prevents components from accessing global state outside their nested scope. This might lead to issues if a component genuinely needs to reference data at the root of the model.

I'm not sure about this one. @jacobsimionato is the assumption in code here correct?

samples/client/angular/projects/restaurant/src/app/client.ts

jacobsimionato

Wow, you worked through a lot of issues to get this running. Thank you so much for going on the journey - looks great and will really help our users figure out how to use A2UI!

Let's sync about the relative/absolute path thing tomorrow!

jacobsimionato · 2026-04-15T03:25:06Z

renderers/angular/src/v0_9/catalog/basic/list.component.ts

+   * Track-by function to ensure stable change detection for list items.
+   * Uses the full resolved path (`basePath/id`) to uniquely identify items.
+   */
+  readonly trackBy = (index: number, item: Child) => `${item.basePath}/${item.id}`;


Nice!! This is where having a proper framework expert is important.

jacobsimionato · 2026-04-15T03:27:48Z

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

+
+  @HostBinding('style.flex')
+  get flexStyle() {
+    const w = this.weight();


Weight is property that's defined in the basic catalog specification (https://github.com/google/A2UI/blob/main/specification/v0_9/json/basic_catalog.json#L1253), but not in the core A2UI specification, so handling of it should live in the basic catalog implementation rather than in the core renderer codebase.

I know it might be awkward to implement, but it's okay to have a shared utility that is used by every Component in the catalog. It's just important that we don't bake any catalog-specific stuff into the core, so that developers have a blank canvas to build their own catalogs on.

jacobsimionato · 2026-04-15T03:28:48Z

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

-      console.warn(`Component ${id} not found in surface ${this.surfaceId()}`);
+      console.warn(`Component ${id} not found in surface ${this.surfaceId()}. Waiting for it...`);
+
+      const sub = surface.componentsModel.onCreated.subscribe((comp) => {


Oh nice - I assume this fixes streaming.

jacobsimionato · 2026-04-15T03:29:11Z

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

+    // component to react when a new prop is added after creation.
+    const onPropsUpdateSub = componentModel.onUpdated.subscribe(() => {
+      this.props = this.binder.bind(this.context!);
+      this.weight.set(componentModel.properties['weight'] || null);


Again, let's remove any references to weight here.

jacobsimionato · 2026-04-15T03:32:06Z

renderers/web_core/src/v0_9/rendering/data-context.ts

-      return path;
-    }
-    if (path === '' || path === '.') {
+    // In A2UI v0.9, all paths generated by the prompt-first LLM must begin with a leading `/`


I ran into this issue too with other renderers. We made a mistake in the specification. We do want to have absolutely and relative path support, which doesn't follow the RFC exactly.

I merged #1084 last week which updates the spec to be clear on this, but I found out yesterday that there is a bug in the streaming parser in Python that adds the trailing slash back even if the LLM does not include it.

I just mailed #1179 to resolve this. Can you try removing this logic from your change, but patching my Python change instead? The agent should send the relative path without the leading slash, and the client should interpret it correctly.

jacobsimionato · 2026-04-15T03:35:00Z

samples/agent/adk/restaurant_finder/agent.py

+original_inject = instructions_utils.inject_session_state
+
+
+async def custom_inject_session_state(template: str, context: Any) -> str:


Oh yeah, we keep hitting this. Nice!

jacobsimionato · 2026-04-15T03:36:46Z

specification/v0_9/json/basic_catalog.json

    "formatString": {
      "type": "object",
-      "description": "Performs string interpolation of data model values and other functions in the catalog functions list and returns the resulting string. The value string can contain interpolated expressions in the `${expression}` format. Supported expression types include: JSON Pointer paths to the data model (e.g., `${/absolute/path}` or `${relative/path}`), and client-side function calls (e.g., `${now()}`). Function arguments must be named (e.g., `${formatDate(value:${/currentDate}, format:'MM-dd')}`). To include a literal `${` sequence, escape it as `\\${`.",
+      "description": "Performs string interpolation of data model values and other functions in the catalog functions list and returns the resulting string. The value string can contain interpolated expressions in the `${<expression>}` format. Supported expression types include: JSON Pointer paths to the data model (e.g., `${/absolute/path}` or `${relative/path}`), and client-side function calls (e.g., `${now()}`). Function arguments must be named (e.g., `${formatDate(value:${/currentDate}, format:'MM-dd')}`). To include a literal `${` sequence, escape it as `\\${`.",


Is this necessary? I imagine it was another attempt to work around the ADK string interpolation issue?

josemontespg added 4 commits April 14, 2026 15:42

Port angular restaurant sample app to 0.9

50e1aa2

Merge branch 'main' into port-angular-restaurant-sample-to-09

d881306

Fix broken tests

f42a110

Clear unnecessary formatting

af0ade3

github-project-automation bot added this to A2UI Apr 15, 2026

github-project-automation bot moved this to Todo in A2UI Apr 15, 2026

gemini-code-assist bot reviewed Apr 15, 2026

View reviewed changes

Address feedback in PR

9212fa2

josemontespg assigned ditman, jacobsimionato and gspencergoog Apr 15, 2026

josemontespg added 2 commits April 14, 2026 17:39

Fix lint errors in data-context.ts

1aabb97

Merge branch 'main' into port-angular-restaurant-sample-to-09

addc94f

jacobsimionato reviewed Apr 15, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Port Angular Restaurant Sample to 0.9 and Stabilize Tests#1189

Port Angular Restaurant Sample to 0.9 and Stabilize Tests#1189
josemontespg wants to merge 7 commits intogoogle:mainfrom
josemontespg:port-angular-restaurant-sample-to-09

josemontespg commented Apr 15, 2026 •

edited

Loading

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

Uh oh!

Uh oh!

gemini-code-assist bot Apr 15, 2026

Uh oh!

josemontespg Apr 15, 2026

Uh oh!

Uh oh!

jacobsimionato left a comment

Uh oh!

jacobsimionato Apr 15, 2026

Uh oh!

jacobsimionato Apr 15, 2026

Uh oh!

jacobsimionato Apr 15, 2026

Uh oh!

jacobsimionato Apr 15, 2026

Uh oh!

jacobsimionato Apr 15, 2026

Uh oh!

jacobsimionato Apr 15, 2026

Uh oh!

jacobsimionato Apr 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		original_inject = instructions_utils.inject_session_state


		async def custom_inject_session_state(template: str, context: Any) -> str:

Conversation

josemontespg commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Key Changes

Screenshots

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

gemini-code-assist bot Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jacobsimionato left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

josemontespg commented Apr 15, 2026 •

edited

Loading