Angular native wrappers - #3933 #4180

GCHQDev01001010 · 2026-01-13T12:51:20Z

Summary of the changes

Set up new output targets in the stencil config to output native angular wrapper components in a similar vein to the react components. Versions have been included that will allow the integrating developers to import the components as standalone items one-by-one at need or as a whole module. This also required the addition/alteration of the custom-elements-dist output to create an internal package for the web-components that the angular output plugin could use.

The package is included in the pack all script and other checks. Also includes an Angular schematic in the package so users can install simply with "ng add".

Documentation has been updated to indicate installation and useage of the new package and components and to provide clarity that this is a community-developed and supported addition as per the ICDS team's request.

(This is a rebuild of #4054 )

Related issue

closes #3933
& ic-design-system 850

Checklist

General

Changes to docs package checked and committed.
All acceptance criteria reviewed and met.

Testing

Relevant unit tests and visual regression tests added.
Visual testing against Figma component specification completed.
[-] Playground stories in React Storybook up to date, with any prop changes and additions addressed. - not needed, see 850 issue comments
[-] Compare performance of modified components against develop using Performance addon in React Storybook. - not needed, see 850 issue comments

Accessibility

Accessibility Insights FastPass performed.
A11y unit test added and yields no issues.
[-] A11y plug-in on Storybook yields no issues. - not including Storybook
Manual screen reader testing performed using NVDA and VoiceOver.
Manual keyboard testing for keyboard controls and logical focus order.
Correct roles used and ARIA attributes used correctly where required.
Logical heading structure is maintained, and the HTML elements used for headings can be changed to fit within the wider page structure.

Resize/zoom behaviour

Page can be zoomed to 400% with no loss of content.
Screen magnifier used with no issues.
Text resized to 200% with no loss of content.
Text spacing increased as per the WCAG 1.4.12 success criterion with no loss of content.

System modes

Browser setting 'prefers reduced motion' tested. No animations or motion visible whilst this setting is on.
Windows High Contrast mode tested with no loss of content.
System light and dark mode tested with no loss of content.
Browser support tested (Chrome, Safari, Firefox and Edge).

Testing content extremes

Min/max content examples tested with no loss of content or overflow.
All prop combinations work without issue.
Tested for FOUC (Flash of Unstyled Content) in both SSR (Server-Side Rendering) and SSG (Static Site Generation) settings.
Controlled and uncontrolled input components tested.
Props/slots can be updated after initial render.

packages/angular-community-supported/package.json

packages/angular-community-supported/README.md

packages/web-components/stencil.config.ts

packages/angular-community-supported/README.md

evenstensberg

A few more comments. Good work here so far!

packages/angular-community-supported/scripts/build-core.js

packages/angular-community-supported/scripts/clean-generated.js

evenstensberg · 2026-01-13T16:01:25Z

packages/angular-community-supported/src/directives/angular-component-lib/utils.ts

@@ -0,0 +1,77 @@
+/* eslint-disable */
+/* tslint:disable */


any way to enable ts/eslint here when the pr is mature enough?

not that I know of, this is a file generated by the stencil output target so if we change it here it will just add it in again when the package is built next.
There also aren't any other config options for the library to omit generating these lines that I know of.

evenstensberg · 2026-01-13T16:02:11Z

packages/angular-community-supported/src/directives/angular-component-lib/utils.ts

+      defineCustomElementFn();
+    }
+
+    if (inputs) {


inline proxyInputs(cls, inputs);

(if(cond) inline();)

Similarly, this is a generated file. With these single line conditionals I would agree with the styling, but again it's not something I know how to or even if it can be controlled.

evenstensberg · 2026-01-13T16:02:46Z

packages/angular-community-supported/src/directives/boolean-value-accessor.ts

+import { ValueAccessor } from "./value-accessor";
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */


possible to enable lint again?

See my previous comments

evenstensberg · 2026-01-13T16:02:55Z

packages/angular-community-supported/src/directives/radio-value-accessor.ts

+import { ValueAccessor } from "./value-accessor";
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */


See my previous comments

evenstensberg · 2026-01-13T16:03:07Z

packages/angular-community-supported/src/directives/select-value-accessor.ts

+import { ValueAccessor } from "./value-accessor";
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */


See my previous comments

evenstensberg · 2026-01-13T16:03:17Z

packages/angular-community-supported/src/directives/text-value-accessor.ts

+import { ValueAccessor } from "./value-accessor";
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */


See my previous comments

packages/angular-community-supported/scripts/build-core.js

packages/angular-community-supported/scripts/clean-generated.js

…arget for native components Set up new output targets in the stencil config to output native angular wrapper components in a similar vein to the react components. Versions have been included that will allow the integrating developers to import the components as standalone items one-by-one at need or as a whole module. This also required the addition/alteration of the custom-elements-dist output to create an internal package for the web-components that the angular output plugin could use. The package is included in the pack all script and other checks. Also includes an Angular schematic in the package so users can install simply with "ng add". Documentation has been updated to indicate installation and useage of the new package and components and to provide clarity that this is a community-developed and supported addition as per the ICDS team's request. closes mi6#3933

… in PR

pushed with no-verify as commitizen was undoing the prettier fixes

…me per PR comment

…i's dependencies Vulnerability recently added for the hono package which is a dependency of a dependency for @angular/cli. Tried updating cli to latest version but this hasn't puhed hono onto a patched version.

…o latest to resolve audit risk

GCHQDev01001010 · 2026-01-22T13:00:56Z

This has been moved to a fresh branch: #4206

GCHQDev01001010 mentioned this pull request Jan 13, 2026

Feat/3933 angular native wrappers #4054

Closed

23 tasks

evenstensberg reviewed Jan 13, 2026

View reviewed changes

GCHQDev01001010 force-pushed the 3933-angular-wrappers branch from 631c41d to ee291d8 Compare January 13, 2026 13:57

evenstensberg reviewed Jan 13, 2026

View reviewed changes

packages/angular-community-supported/README.md Show resolved Hide resolved

evenstensberg reviewed Jan 13, 2026

View reviewed changes

GCHQDev01001010 force-pushed the 3933-angular-wrappers branch from b11e1e9 to 829b728 Compare January 14, 2026 11:42

GCHQDev01001010 commented Jan 14, 2026

View reviewed changes

packages/angular-community-supported/scripts/build-core.js Show resolved Hide resolved

GCHQDev01001010 commented Jan 14, 2026

View reviewed changes

packages/angular-community-supported/scripts/clean-generated.js Show resolved Hide resolved

GCHQDev01001010 force-pushed the 3933-angular-wrappers branch 4 times, most recently from 743255b to 492581a Compare January 21, 2026 12:15

GCHQDev01001010 added 8 commits January 21, 2026 12:18

chore(angular-community-supported): cleans up some issues highlighted…

541804f

… in PR

style(angular-community-supported): prettier fixes

cf0b980

pushed with no-verify as commitizen was undoing the prettier fixes

docs(angular-community-supported): adds missed link for HMGCC to read…

bbfdcdf

…me per PR comment

chore(root): adds audit acknowledgements for vulnerabilities in ng cl…

dfba748

…i's dependencies Vulnerability recently added for the hono package which is a dependency of a dependency for @angular/cli. Tried updating cli to latest version but this hasn't puhed hono onto a patched version.

build(root): adds the stencil generated files to prettier ignore

1b9a82b

chore(angular-community-supported): attempts to update @angular/cli t…

5e9f575

…o latest to resolve audit risk

style(web-components): removed commented code

c8650ba

GCHQDev01001010 force-pushed the 3933-angular-wrappers branch from 492581a to c8650ba Compare January 21, 2026 12:24

GCHQDev01001010 mentioned this pull request Jan 22, 2026

Angular native wrappers - #3933 #4206

Open

23 tasks

GCHQDev01001010 closed this Jan 22, 2026

Angular native wrappers - #3933 #4180

Angular native wrappers - #3933 #4180

Uh oh!

Conversation

GCHQDev01001010 commented Jan 13, 2026

Summary of the changes

Related issue

Checklist

General

Testing

Accessibility

Resize/zoom behaviour

System modes

Testing content extremes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

evenstensberg left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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!

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!

Uh oh!

Uh oh!

GCHQDev01001010 commented Jan 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants