Meet Nova Angular 6

Overview

As part of our latest Visa Product Design System (VPDS) release, the team has upgraded Nova Angular to fully support Angular 18–20, ensuring developers can build with the latest framework features while staying aligned with Visa’s design system standards. This upgrade introduces signals-based architecture, enabling faster change detection, reactive state management, and smoother input handling. These enhancements improve performance, making easier to integrate Nova Angular into modern workflows. We’ve also refined the library’s structure to enhance compatibility with other VPDS components, enabling teams to adopt Nova Angular in new projects or migrate existing ones with minimal friction.

Strategic objectives

The Nova Angular 6 upgrade was guided by three key goals:

1. Empower developers with greater control over component behavior.
2. Adopt Angular’s zoneless architecture and signals-based reactivity.
3. Minimize breaking changes to ensure the performance and developer experience outweighed migration.

This release aligns with what the Angular team calls the “Angular renaissance”—a period of rapid innovation focused on performance, developer experience, and modern architecture.

The technical challenge

We identified significant architectural areas in our implementation that could be enhanced to take advantage of the latest Angular features.

1. Increase developer control
2. Streamline state management
3. Adopt Angular’s latest tools
4. Move beyond Zone.js for change detection

Technical implementation

The upgrade required significant architectural changes while maintaining compatibility where possible. We focused on four key technical areas.

1. Signal-based reactivity

We migrated nearly all internal properties to Angular Signals, transforming our approach to state management. Benefits include:

• More explicit and efficient change detection
• Predictable execution patterns
• Clear re-rendering logic
• Targeted updates for improved performance
• A single source of truth across components and directives

2. Dependency reduction

We removed four major dependencies:

• @angular/cdk
• @angular/router
• rxjs
• Zone.js

This reduced the library’s footprint by 40%, simplifying maintenance and improving performance.

3. Service modernization

We replaced several services with more efficient alternatives:

4. Directive optimization

We migrated from @HostListener and @HostBinding to the host: {} property. This change:

• Simplified binding host properties to signals
• Improved code organization and readability
• Enhanced performance through more efficient binding
• Reduced boilerplate code
• Aligned with Angular best practices

We also adopted transform functions inside inputs, allowing us to use Angular core’s default transformers and eliminate the need for coercion functions from Angular CDK library.

Key changes

Input property prioritization

Change: User-provided inputs now take precedence over internal state.

Why: Previously, internal defaults could override developer inputs, causing confusion. This change ensures a more predictable API and reduces support requests.

Example: In the Button component, we now check for user-provided properties first before applying any internal defaults.

Deterministic IDs

Change: Replaced random UUIDs with deterministic ID generation.

Why: Random IDs complicated testing and analytics. Deterministic IDs improve reliability and consistency across renders.

Example: The ID generator now creates predictable IDs based on component type and instance count.

Pagination control

Change: Replaced the PaginationService with a more flexible PaginationControl.

Why: The service-based approach was difficult to use with multiple pagination instances and required complex state management. The new control-based approach simplifies usage, improves customization, and enhances type safety.

Example: The new PaginationControl provides a more declarative approach with better configuration options compared to the service-based implementation:

Nova Icons - Angular

We also made key improvements to the @visa/nova-icons-angular package to align with the Nova Angular 6 upgrade:

• Support for Angular 18, 19, and 20.
• Reduced overall package size by ~25% (from 44.7MB to 33.5MB).
• Reduced JavaScript footprint by ~26% (from 23.1MB to 17.5MB).
• Improved rendering performance with signals.

Developer experience benefits

The upgrade provides several key benefits for development teams.

Performance improvements

• Reduced initial load times (15% improvement in typical applications that use Nova Angular)
• More responsive interactions
• Smaller bundle sizes

Customization

• Full control over component state via input signals
• Clearer API boundaries and documentation

Form improvements

Form elements now extend Angular’s DefaultValueAccessor, fixing legacy issues and simplifying form logic.

Testing efficiency

• Deterministic IDs for reliable snapshot testing
• Consistent component behavior across test runs
• Better type safety and IDE integration

Performance analysis

The architectural changes produced significant and measurable improvements, as documented in our performance testing and bundle analysis.

Testing efficiency

Using the Input component as a benchmark:

Before: 95ms average render time with Zone.js change detection

After: 41ms average render time with Zoneless change detection (231% improvement)

Library metrics

These improvements translate directly to faster application startup times, reduced bundle sizes, and more responsive user interfaces.

Testing strategy improvements

We revamped our testing strategy to improve reliability and coverage:

1. Adopted @testing-library/angular for rendered HTML testing.
2. Implemented snapshot testing for component examples.
3. Added accessibility (axe) testing.
4. Increased test coverage from 70% to 98%

These changes helped us catch edge cases earlier, reduce manual a11y reviews, and confidently make architectural improvements.

Strategic roadmap

Nova Angular 6 creates the foundation for our future component library strategy:

• Simplified upgrades: Easier adoption of future Angular versions.
• Native-first approach: Prioritize components that leverage native browser capabilities.
• Customization-focused: Provide styles and optional controllers while allowing developers to bring their own logic.

This strategic direction aligns with modern front-end practices and positions Nova Angular as a lightweight, flexible solution that enhances application development.