WlcmCommunity

✨ This workspace has been generated by Nx, Smart Monorepos · Fast CI. ✨

Migrating to @wlcm/angular v22

v22 upgrades the library to Angular 22 (peer ^22.0.0, Node >=22.12.0, TypeScript 6) and modernizes the whole codebase. It is a breaking major for TypeScript consumers — the changes below are intentional and not reversible.

Angular 22 baseline

• Requires Angular 22 and Node 22.12+. The library is zoneless-safe and every component ships with ChangeDetectionStrategy.OnPush. If your app is still zone-based it keeps working; new apps should adopt provideZonelessChangeDetection().
• Reactive Forms are unchanged (no signal-forms rewrite).

Signal-based public API (breaking)

All component inputs/outputs and view/content queries are now signals. Read values by calling them and set two-way values with .set():

• @Input() foo → input() — read as cmp.foo(), not cmp.foo. Template bindings ([foo]="…") are unchanged.
• @Output() fooChange → output() — (fooChange)="…" template bindings are unchanged; imperative cmp.fooChange.subscribe(…) still works.
• Two-way inputs (e.g. search-field queryParams, stepper step key/completed) are model() — bind with [(queryParams)] or read/write via cmp.queryParams() / cmp.queryParams.set(…).

WlcmStep signal contract (breaking)

WlcmStep members are now signals — the previous key$/label$/completed$/disabled$ observable bridges have been removed:

• step.completed / step.key / step.disabled are model() signals — step.completed() to read, step.completed.set(true) to write.
• step.label is a required input() — read as step.label().

Removed button type input (breaking)

The deprecated type input on the button (and its legacy --primary/--secondary/--accent/--borderless/--paddingless SCSS variants) is removed. Use styleType/color instead — e.g. type="paddingless" → styleType="compact", type="borderless" → styleType="text".

NgModules (still shipped, prefer standalone)

The thin per-feature Wlcm*Module re-export modules are still exported and continue to work, but all components are standalone — prefer importing the components directly over the modules going forward. WlcmFormsModule also provides MAT_RADIO_DEFAULT_OPTIONS ({ color: 'primary' }); if you import the form components standalone, provide that yourself where needed.

Theming: CSS custom-property tokens + Material M3

The SCSS config-map entry point is unchanged (non-breaking), but the mixins now emit --wlcm-* CSS custom properties and component styles consume them via var(--wlcm-*), so runtime retheming is possible. If you theme Material widgets alongside the library, migrate the deprecated mat.m2-* APIs to mat.theme() (M3) as the sandbox does.

Integrate with editors

Enhance your Nx experience by installing Nx Console for your favorite editor. Nx Console provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.

Start the application

Run npx nx serve sandbox to start the development server. Happy coding!

Build for production

Run npx nx build sandbox to build the application. The build artifacts are stored in the output directory (e.g. dist/ or build/), ready to be deployed.

Running tasks

To execute tasks with Nx use the following syntax:

npx nx <target> <project> <...options>

You can also run multiple targets:

npx nx run-many -t <target1> <target2>

..or add -p to filter specific projects

npx nx run-many -t <target1> <target2> -p <proj1> <proj2>

Targets can be defined in the package.json or projects.json. Learn more in the docs.

Set up CI!

Nx comes with local caching already built-in (check your nx.json). On CI you might want to go a step further.

• Set up remote caching
• Set up task distribution across multiple machines
• Learn more how to setup CI

Explore the project graph

Run npx nx graph to show the graph of the workspace. It will show tasks that you can run with Nx.

• Learn more about Exploring the Project Graph

Connect with us!

• Join the community
• Subscribe to the Nx Youtube Channel
• Follow us on Twitter