Skip to content

feat(angular): add native angular container component sample to explorer - #2274

Draft
josemontespg wants to merge 1 commit into
angular-universal-componentsfrom
angular-custom-grid-sample
Draft

feat(angular): add native angular container component sample to explorer#2274
josemontespg wants to merge 1 commit into
angular-universal-componentsfrom
angular-custom-grid-sample

Conversation

@josemontespg

@josemontespg josemontespg commented Aug 14, 2026

Copy link
Copy Markdown
Collaborator

Summary

Demonstrates how developers can build native Angular container components in A2UI that host both native Angular and universal Web Component children within the same A2UI surface, and adds dynamic query parameter toggling (useUniversalComponent) for testing both rendering modes.

Key Changes

  • Native Container Component (CustomGridComponent): Implemented a 4-cell responsive grid container in @a2ui/angular-explorer using @Component, CatalogComponentBase, and <a2ui-v09-component-host> to instantiate child slots dynamically.
  • Example JSON (37_native-grid.json): Showcases CustomGrid hosting a mix of:
    • Native Angular components: CustomSlider with reactive two-way data binding mapped to independent paths (/sliderValue1 and /sliderValue2).
    • Universal Web Components: Card, Column, Text (with dynamic ${/path} string interpolation), and Button (with client action dispatching).
    • This example is placed in the core specification/v0_9/catalogs/basic/examples directory for cross-framework compatibility.
  • Dynamic Universal Mode QueryParam:
    • Added useUniversalComponent URL query parameter support to both the A2UI Angular Explorer (renderers/angular/a2ui_explorer) and the Restaurant Finder Sample App (samples/client/angular/projects/restaurant).
    • Defaults to false (native Angular components) when absent, and enables W3C universal Web Components when ?useUniversalComponent=true.
  • Test Suite & Verification:
    • Unit tests for CustomGridComponent.
    • Integration test suite (37_native-grid.spec.ts) verifying rendering, mixed child instantiation, and reactive data updates.
    • Manual Verification: Manually verified that both sample applications (A2UI Angular Explorer and Restaurant Finder) function as intended in both native and universal modes.

Pre-launch Checklist

  • I read the [Contributors Guide].
  • I read the [Style Guide].
  • My code changes have tests.

Resolves #1270

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a new native Angular container component, CustomGridComponent, which implements a 2x2 grid layout capable of hosting both native and universal child components. It also adds corresponding unit tests, integration tests, and a demo example (37_native-grid.json). Additionally, the PR refactors the renderer configuration in DemoComponent to use provideA2Ui and updates DemoCatalog to extend BasicCatalogBase. The review feedback suggests a minor improvement in CustomGridComponent to use Angular 17's @if (value; as local) syntax to avoid redundant signal reads in the template.

Comment thread renderers/angular/a2ui_explorer/src/app/custom-grid.component.ts Outdated
@josemontespg
josemontespg force-pushed the angular-custom-grid-sample branch from 1664bb4 to 1814f8e Compare August 14, 2026 19:17
@josemontespg
josemontespg force-pushed the angular-custom-grid-sample branch from 1814f8e to 30e9ad6 Compare August 14, 2026 19:25
@josemontespg
josemontespg force-pushed the angular-custom-grid-sample branch from 30e9ad6 to fe542db Compare August 14, 2026 19:38
@josemontespg
josemontespg force-pushed the angular-custom-grid-sample branch from fe542db to 9d17a58 Compare August 14, 2026 19:46
@josemontespg
josemontespg force-pushed the angular-custom-grid-sample branch from 9d17a58 to f196732 Compare August 14, 2026 19:48
@josemontespg
josemontespg force-pushed the angular-custom-grid-sample branch from f196732 to ed3c05b Compare August 14, 2026 19:53
@josemontespg
josemontespg force-pushed the angular-custom-grid-sample branch 2 times, most recently from ddafd6c to 21c3f2c Compare August 14, 2026 21:46
@josemontespg
josemontespg force-pushed the angular-custom-grid-sample branch from 21c3f2c to 74f2301 Compare August 14, 2026 23:24
@josemontespg
josemontespg force-pushed the angular-custom-grid-sample branch from 74f2301 to 7db5575 Compare August 14, 2026 23:28
@josemontespg
josemontespg force-pushed the angular-custom-grid-sample branch from 7db5575 to f227500 Compare August 14, 2026 23:36
@josemontespg
josemontespg force-pushed the angular-custom-grid-sample branch from f227500 to b30b6ad Compare August 14, 2026 23:41
@josemontespg
josemontespg force-pushed the angular-custom-grid-sample branch 2 times, most recently from f3d0d61 to a519190 Compare August 17, 2026 19:33
@josemontespg
josemontespg force-pushed the angular-custom-grid-sample branch from a519190 to 2df5d1b Compare August 17, 2026 20:31
@josemontespg
josemontespg force-pushed the angular-custom-grid-sample branch from 2df5d1b to f92fa39 Compare August 17, 2026 20:57
@josemontespg
josemontespg force-pushed the angular-custom-grid-sample branch 2 times, most recently from 1b5bdb4 to b6e9d01 Compare August 17, 2026 21:27
@josemontespg
josemontespg force-pushed the angular-custom-grid-sample branch from b6e9d01 to 34a075d Compare August 18, 2026 18:52
@josemontespg
josemontespg force-pushed the angular-custom-grid-sample branch from 34a075d to 2b2ca27 Compare August 18, 2026 19:44
@josemontespg
josemontespg force-pushed the angular-custom-grid-sample branch from 2b2ca27 to 111d116 Compare August 18, 2026 19:54
@josemontespg
josemontespg force-pushed the angular-custom-grid-sample branch from 111d116 to 65938a5 Compare August 18, 2026 19:59
@josemontespg
josemontespg force-pushed the angular-custom-grid-sample branch from 65938a5 to f3fbce0 Compare August 18, 2026 20:04
@josemontespg
josemontespg force-pushed the angular-custom-grid-sample branch from f3fbce0 to cf25aef Compare August 18, 2026 20:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support "portable A2UI web Components" which can be installed in a Catalog for *any* framework adapter

1 participant