Nova Components Angular (Angular 18 Only)

Nova Components Angular allows you to integrate Nova's native UI elements into your Angular applications. This guide is specifically designed for Angular 18. If you are using a different version of Angular, please visit the @nova-design-system/nova-angular page for the corresponding documentation and support.

This package leverages Angular's modern features and optimizations, offering a streamlined integration process for standalone components and Angular forms.

• Nova Components Angular (Angular 18 Only)
  • Installation
  • Setting up Tailwind
    • About Tailwind and the Nova Plugin
      • 1. Install Tailwind CSS
      • 2. Configure PostCSS Plugins
      • 3. Create tailwind.config.ts
      • 4. Configure Tailwind and Nova Plugin in styles.css
      • 5. Include the Nova Tokens (Spark or Ocean)
  • Nova Font Pro Integration
    • Option 1: Angular.json Configuration (Recommended)
    • Option 2: Import in Styles.css
    • Option 3: HTML Integration
  • Standalone Component Setup
    • 1. Provide Nova Components
    • 2. Configuring Standalone Components
  • Handling Angular Forms with Nova Components
    • Standalone Component Setup with Forms
    • Usage Example with Angular Forms
  • Conclusion

Installation

Install the necessary Nova packages using your package manager:

npm install @nova-design-system/nova-webcomponents @nova-design-system/nova-base @nova-design-system/nova-angular-18

or

yarn add @nova-design-system/nova-webcomponents @nova-design-system/nova-base @nova-design-system/nova-angular-18

In some case, you might experience SSL certificate issues when working on Developers' VM. As documented in the Developers' setup guide, you need to turn off the SSL certificate verification:

npm config set strict-ssl false

Setting up Tailwind

Nova Angular requires Tailwind CSS for styling. Tailwind provides a powerful utility-first workflow and an optimized bundle size. Nova includes a dedicated Tailwind theme and plugin that map Nova’s design tokens to Tailwind’s theme and utilities, enabling consistent, token-driven styling across your app.

Tailwind Version This guide is written for Tailwind v4. While compatible with v3, some features may not work as expected. See the official Angular + Tailwind guide for more details.

About Tailwind and the Nova Plugin

• What is Tailwind? A utility-first CSS framework with low-level, composable classes (flex, grid, spacing, color, typography) to rapidly build UIs.
• Nova Tokens: Nova ships design tokens as CSS variables (via the Spark and Ocean themes) for colors, spacing, typography, radii, shadows, and more.
• Integration:
  • novaTailwindTheme wires Nova tokens into Tailwind’s theme scales.
  • The Nova Tailwind plugin exposes utilities and variants that reference those tokens, so your Tailwind classes resolve to Nova’s token values at runtime.
• Why import tokens CSS? Import exactly one token CSS file (spark.css or ocean.css) so the underlying CSS variables exist at runtime. The Tailwind utilities generated by the plugin read from these variables.
• Do not mix with legacy utilities: When using Tailwind, do not import @nova-design-system/nova-base/dist/css/nova-utils.css to avoid redundant CSS and larger bundles.

1. Install Tailwind CSS

npm install tailwindcss @tailwindcss/postcss postcss

2. Configure PostCSS Plugins

Create a .postcssrc.json file in the root of your project and add the @tailwindcss/postcss plugin to your PostCSS configuration.

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

3. Create tailwind.config.ts

In the root of your project, create a tailwind.config.ts file and include the Nova theme:

import type { Config } from 'tailwindcss'
import { novaTailwindTheme } from "@nova-design-system/nova-base/theme"

export default {
  theme: novaTailwindTheme,
} satisfies Config

4. Configure Tailwind and Nova Plugin in styles.css

In ./src/styles.css, add the Tailwind import, the config path, the dark mode class, and the Nova plugin:

@import 'tailwindcss';

@config "../tailwind.config.ts";
@plugin "@nova-design-system/nova-base/theme/plugin";
@custom-variant dark (&:where(.dark, .dark *));

Dark Mode To enable dark mode, add the dark class to the <body> element.

5. Include the Nova Tokens (Spark or Ocean)

Add the Nova Tokens CSS file to the styles array in your angular.json configuration:

{
  ...
  "styles": [
    "src/styles.css",
    "@nova-design-system/nova-base/dist/css/spark.css" // or ocean.css
  ],
  ...
}

Nova Font Pro Integration

[!WARNING] Nova Fonts is a protected asset and is not included in the Nova Base package. You need to include the Nova Fonts CSS file in your project. To get the Nova Fonts URL, contact us via Teams or see the Nova Design System internal wiki.

Once you have the URL, you can integrate it using any of these methods:

Option 1: Angular.json Configuration (Recommended)

Add the Nova Font Pro URL to the styles array in your angular.json configuration:

"styles": [
  "contact-us-for-URL/nova-fonts-pro.css"
]

Option 2: Import in Styles.css

@import url('contact-us-for-URL');

Option 3: HTML Integration

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="contact-us-for-URL/nova-fonts-pro.css">
</head>
<body>
  <app-root></app-root>
</body>
</html>

The font CSS includes both font definitions and a body { font-family: ... } rule to apply fonts across your Angular application.

Standalone Component Setup

Angular 18 encourages the use of standalone components with modern configuration. Follow these steps to integrate Nova Components into your Angular application.

1. Provide Nova Components

To make Nova Web Components available across your application, add the defineCustomElements function as an app initializer in your application configuration:

import { ApplicationConfig, APP_INITIALIZER } from '@angular/core';
import { provideRouter } from '@angular/router';
import { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    {
      provide: APP_INITIALIZER,
      useFactory: () => defineCustomElements, // Add the nova initializer here
      deps: [],
      multi: true,
    },
  ],
};

2. Configuring Standalone Components

For any standalone component where you want to use Nova Components, configure your component to include the nova-components module:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NovaComponentsModule } from '@nova-design-system/nova-angular-18';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, NovaComponentsModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // Your component logic here
}

Handling Angular Forms with Nova Components

Nova Components Angular supports seamless integration with Angular's reactive and template-driven forms through the NovaComponentsValueAccessorModule.

Standalone Component Setup with Forms

When working with forms in Angular 18, import the NovaComponentsValueAccessorModule along with Angular’s FormsModule in your standalone component to enable two-way binding. Ensure to also include the NovaComponentsModule:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { NovaComponentsValueAccessorModule, NovaComponentsModule } from '@nova-design-system/nova-angular-18';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    FormsModule,
    NovaComponentsModule,
    NovaComponentsValueAccessorModule, // Enables form integration for Nova components
  ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  inputValue = 'hello';
}

Usage Example with Angular Forms

<nv-fieldtext label="Input" [(ngModel)]="inputValue"></nv-fieldtext>
Input Value: {{ inputValue }}

This configuration allows Nova components to work seamlessly with Angular forms, complete with two-way binding.

Conclusion

Nova Components Angular provides an easy and flexible way to incorporate Nova's UI components into your Angular 18 projects. By following the steps in this guide, you'll be able to integrate Nova's native UI elements using Angular's modern standalone component architecture and fully leverage Angular forms.

If you require support for Angular versions other than 18, please refer to the @nova-design-system/nova-angular documentation for the appropriate setup and configuration.

Happy coding with Nova and Angular!