Start building with Angular
Follow this step-by-step guide to start developing with the Visa Product Design System in Angular.
Step 1: Update Angular
Nova Angular supports Angular v16 and v17. Visit Angular’s guide on how to update Angular to v16 or update Angular to v17.
Step 2: Install the library
You can install the Nova Angular library using the package manager of your choice. Below we’ve provided the most common: NPM, PNPM, Yarn, and Bun.
Note: Package managers can resolve dependencies differently and might not automatically install all required dependencies.
Step 2b: Install the Component Dev Kit (for Angular 16 only)
If you’re using Angular 16, install the proper version of the Angular CDK.
Step 3: Set up the application
Step 3a: Import Nova styles
Import the Nova styles library and theme in your angular JSON or equivalent file. Visa-light is the default theme, but can be replaced with other available themes. To learn more, visit Theming, and for more about Nova styles, visit Get started for Styles (CSS).
Step 3b: Update compilerOptions
Add paths in your tsconfig.
Step 3c: Import the Nova Angular component library
Import our library into your standalone component or NgModule.
Step 4: Add icons (optional)
Nova Angular can be used with Nova icons or a custom icon library. This documentation and the component examples use the Nova icons library. In addition, Angular icons are available as standalone icons or icon sprites. They can be imported into your standalone component file, or your NgModule.
Install Nova icons
Standalone icons (recommended)
If you need just a few icons, you can import them directly from , then use the icons directly inside your HTML.
HTML
Icon sprites
If you need many icons or prefer a single import for all icons of a type, you can use icon sprites. Import them directly from , then use the icons inside your HTML.
HTML
Step 5: Use the components
After adding Nova icons, you’re ready to use Angular components by copying and pasting the example code into your application. Check out Button to give it a try.
Need help?
If you experience any issues while getting set up with Nova Angular, visit Support or create an issue .