feat(angular): add native angular container component sample to explorer - #2274
Draft
josemontespg wants to merge 1 commit into
Draft
feat(angular): add native angular container component sample to explorer#2274josemontespg wants to merge 1 commit into
josemontespg wants to merge 1 commit into
Conversation
3 tasks
Contributor
There was a problem hiding this comment.
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.
josemontespg
force-pushed
the
angular-custom-grid-sample
branch
from
August 14, 2026 19:17
1664bb4 to
1814f8e
Compare
josemontespg
force-pushed
the
angular-custom-grid-sample
branch
from
August 14, 2026 19:25
1814f8e to
30e9ad6
Compare
josemontespg
force-pushed
the
angular-custom-grid-sample
branch
from
August 14, 2026 19:38
30e9ad6 to
fe542db
Compare
josemontespg
force-pushed
the
angular-custom-grid-sample
branch
from
August 14, 2026 19:46
fe542db to
9d17a58
Compare
josemontespg
force-pushed
the
angular-custom-grid-sample
branch
from
August 14, 2026 19:48
9d17a58 to
f196732
Compare
josemontespg
force-pushed
the
angular-custom-grid-sample
branch
from
August 14, 2026 19:53
f196732 to
ed3c05b
Compare
josemontespg
force-pushed
the
angular-custom-grid-sample
branch
2 times, most recently
from
August 14, 2026 21:46
ddafd6c to
21c3f2c
Compare
josemontespg
force-pushed
the
angular-custom-grid-sample
branch
from
August 14, 2026 23:24
21c3f2c to
74f2301
Compare
josemontespg
force-pushed
the
angular-custom-grid-sample
branch
from
August 14, 2026 23:28
74f2301 to
7db5575
Compare
josemontespg
force-pushed
the
angular-custom-grid-sample
branch
from
August 14, 2026 23:36
7db5575 to
f227500
Compare
josemontespg
force-pushed
the
angular-custom-grid-sample
branch
from
August 14, 2026 23:41
f227500 to
b30b6ad
Compare
josemontespg
force-pushed
the
angular-custom-grid-sample
branch
2 times, most recently
from
August 17, 2026 19:33
f3d0d61 to
a519190
Compare
josemontespg
force-pushed
the
angular-custom-grid-sample
branch
from
August 17, 2026 20:31
a519190 to
2df5d1b
Compare
josemontespg
force-pushed
the
angular-custom-grid-sample
branch
from
August 17, 2026 20:57
2df5d1b to
f92fa39
Compare
josemontespg
force-pushed
the
angular-custom-grid-sample
branch
2 times, most recently
from
August 17, 2026 21:27
1b5bdb4 to
b6e9d01
Compare
josemontespg
force-pushed
the
angular-custom-grid-sample
branch
from
August 18, 2026 18:52
b6e9d01 to
34a075d
Compare
josemontespg
force-pushed
the
angular-custom-grid-sample
branch
from
August 18, 2026 19:44
34a075d to
2b2ca27
Compare
josemontespg
force-pushed
the
angular-custom-grid-sample
branch
from
August 18, 2026 19:54
2b2ca27 to
111d116
Compare
josemontespg
force-pushed
the
angular-custom-grid-sample
branch
from
August 18, 2026 19:59
111d116 to
65938a5
Compare
josemontespg
force-pushed
the
angular-custom-grid-sample
branch
from
August 18, 2026 20:04
65938a5 to
f3fbce0
Compare
josemontespg
force-pushed
the
angular-custom-grid-sample
branch
from
August 18, 2026 20:13
f3fbce0 to
cf25aef
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
CustomGridComponent): Implemented a 4-cell responsive grid container in@a2ui/angular-explorerusing@Component,CatalogComponentBase, and<a2ui-v09-component-host>to instantiate child slots dynamically.37_native-grid.json): ShowcasesCustomGridhosting a mix of:CustomSliderwith reactive two-way data binding mapped to independent paths (/sliderValue1and/sliderValue2).Card,Column,Text(with dynamic${/path}string interpolation), andButton(with client action dispatching).specification/v0_9/catalogs/basic/examplesdirectory for cross-framework compatibility.useUniversalComponentURL query parameter support to both the A2UI Angular Explorer (renderers/angular/a2ui_explorer) and the Restaurant Finder Sample App (samples/client/angular/projects/restaurant).false(native Angular components) when absent, and enables W3C universal Web Components when?useUniversalComponent=true.CustomGridComponent.37_native-grid.spec.ts) verifying rendering, mixed child instantiation, and reactive data updates.Pre-launch Checklist
Resolves #1270