Nova Components Angular (Angular 21 and newer)

@nova-design-system/nova-angular is the only actively supported Angular package. Angular 20 and older are no longer supported by new Nova releases.

Nova Components Angular lets Angular applications use Nova's web components with Angular-friendly imports, forms value accessors, and providers.

Installation

Install the Angular wrapper and Nova Base package:

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

@nova-design-system/nova-webcomponents is installed by @nova-design-system/nova-angular. Install it directly only if your app imports from it outside the Angular wrapper.

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

npm config set strict-ssl false

Tailwind Setup

Nova Angular uses Tailwind CSS as the styling layer. For Angular 21 and newer, use Tailwind v4 and let Angular CLI create the base Tailwind setup whenever possible.

Nova adds two things on top of the Angular/Tailwind setup:

• A Nova Tailwind theme and plugin so Tailwind utilities resolve to Nova design tokens.
• One Nova token CSS file, either spark.css or ocean.css, so those token variables exist at runtime.

Do not import @nova-design-system/nova-base/dist/css/nova-utils.css when using Tailwind. It duplicates utility CSS and increases bundle size.

New Angular Apps

Create the app with Tailwind enabled:

ng new my-app --style=tailwind

Angular CLI creates the Tailwind dependencies, .postcssrc.json, and src/styles.css with:

@import 'tailwindcss';

Existing Angular Apps

Add Tailwind to an existing Angular app with:

ng add tailwindcss

This installs and configures the Tailwind v4 PostCSS setup for Angular.

Manual Tailwind Fallback

Use this only when the Angular CLI setup is not available:

npm install -D tailwindcss @tailwindcss/postcss postcss

Create .postcssrc.json at the project root:

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

Add the Tailwind import to src/styles.css:

@import 'tailwindcss';

Add the Nova Theme and Plugin

Tailwind v4 is CSS-first and does not create or auto-detect a tailwind.config.ts file by default. Nova still uses a small config file because the Nova theme is exported from @nova-design-system/nova-base.

Create tailwind.config.ts at the project root:

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

export default {
  theme: novaTailwindTheme,
} satisfies Config;

Update src/styles.css:

@import 'tailwindcss';

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

The dark variant is optional. Add the dark class to body or another root element when your app should render in dark mode.

Node Module-Type Warning

Because the Nova tailwind.config.ts example uses ES module imports, Node may warn that the package module type is not specified:

[MODULE_TYPELESS_PACKAGE_JSON] Warning: Module type of .../tailwind.config.ts is not specified and it doesn't parse as CommonJS.
Reparsing as ES module because module syntax was detected.

The app will still build, but Node has to parse the config twice. To remove the warning, add "type": "module" to your Angular app's package.json:

{
  "name": "my-app",
  "type": "module"
}

This matches Angular CLI's ESM-first toolchain and is the recommended setup when your Tailwind config uses import / export syntax.

Add Nova Tokens

Add exactly one Nova token CSS file to the styles array in angular.json:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.css",
              "@nova-design-system/nova-base/dist/css/spark.css"
            ]
          }
        }
      }
    }
  }
}

Use @nova-design-system/nova-base/dist/css/ocean.css instead of spark.css if your app should use the Ocean theme.

Tailwind v3 projects need their existing v3 content configuration and @tailwind directives. New Angular 21+ projects should use the Tailwind v4 setup above.

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": [
  "src/styles.css",
  "@nova-design-system/nova-base/dist/css/spark.css",
  "contact-us-for-URL/nova-fonts-pro.css"
]

Option 2: Import in styles.css

@import url('contact-us-for-URL/nova-fonts-pro.css');

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 App Setup

Angular 21 creates standalone apps by default. Add provideNovaComponents() in src/app/app.config.ts:

import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideNovaComponents } from '@nova-design-system/nova-angular';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideRouter(routes),
    provideNovaComponents(),
  ],
};

Import NovaComponentsModule in each standalone component that uses Nova components:

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

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, NovaComponentsModule],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {}

Module-Based Setup

For NgModule-based apps, import NovaComponentsModule and add provideNovaComponents() to the module providers:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {
  NovaComponentsModule,
  provideNovaComponents,
} from '@nova-design-system/nova-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NovaComponentsModule,
  ],
  providers: [provideNovaComponents()],
  bootstrap: [AppComponent],
})
export class AppModule {}

Usage Example

Use Nova components in Angular templates like Angular components:

<nv-button danger (click)="incrementCount()">Count is {{ count }}</nv-button>

export class App {
  count = 0;

  incrementCount() {
    this.count++;
  }
}

Angular Forms

Nova Components Angular supports template-driven and reactive forms through NovaComponentsValueAccessorModule.

Standalone Components

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

@Component({
  selector: 'app-root',
  imports: [
    FormsModule,
    NovaComponentsModule,
    NovaComponentsValueAccessorModule,
  ],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {
  inputValue = 'hello';
}

NgModule-Based Apps

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {
  NovaComponentsModule,
  NovaComponentsValueAccessorModule,
  provideNovaComponents,
} from '@nova-design-system/nova-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    NovaComponentsModule,
    NovaComponentsValueAccessorModule,
  ],
  providers: [provideNovaComponents()],
  bootstrap: [AppComponent],
})
export class AppModule {}

Template Example

<form>
  <nv-fieldtext [(ngModel)]="inputValue" name="input"></nv-fieldtext>
  <button type="submit">Submit</button>
</form>

Notifications

Render the notification container once near the application root:

import { Component } from '@angular/core';
import {
  NovaComponentsProvidersModule,
  NotificationService,
} from '@nova-design-system/nova-angular';

@Component({
  selector: 'app-root',
  imports: [NovaComponentsProvidersModule],
  template: `
    <button type="button" (click)="showNotification()">Show notification</button>
    <nv-notification-service position="top-right"></nv-notification-service>
  `,
})
export class App {
  constructor(private readonly notifications: NotificationService) {}

  showNotification() {
    this.notifications.show({
      heading: 'Saved',
      message: 'Your changes were saved.',
      feedback: 'success',
    });
  }
}

More Documentation

For more detailed component documentation and examples, refer to the official Nova documentation.