@nova-design-system/nova-angular
v3.0.0-beta.27
Published
Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.
Downloads
484
Keywords
Readme
Nova Components Angular
Nova Components Angular allows you to integrate Nova's native UI elements into your Angular applications. It provides flexibility in usage with both standalone components and module-based setups. This guide will walk you through the necessary steps for setting up and using Nova Components in your Angular project.
Installation
First, 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-angularor
yarn add @nova-design-system/nova-webcomponents @nova-design-system/nova-base @nova-design-system/nova-angularSetup
CSS Integration
To include the Nova UI styles in your Angular project, add the Nova CSS file to the styles array in your angular.json configuration file:
{
"projects": {
"your-project-name": {
"architect": {
"build": {
"options": {
"styles": [
"src/styles.css",
"@nova-design-system/nova-base/dist/css/nova-utils.css",
"@nova-design-system/nova-base/dist/css/spark.css", // or ocean.css
],
"scripts": []
}
}
}
}
}
}This setup ensures that the Nova styles are available throughout your application.
Nova Font Pro Integration
To use Nova fonts in your Angular application, you'll need to contact the Nova team via Teams, email, or check the Nova Wiki to obtain the full CDN URL. 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 CDN URL to the styles array in your angular.json configuration:
"styles": [
"https://novaassets.azureedge.net/fonts/nova-fonts-pro.css"
]Option 2: Import in Styles.css
@import url('https://novaassets.azureedge.net/fonts/nova-fonts-pro.css');Option 3: HTML Integration
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://novaassets.azureedge.net/fonts/nova-fonts-pro.css">
</head>
<body>
<app-root></app-root>
</body>
</html>The nova-fonts-pro.css file includes both font definitions and the font-family rule for the body, automatically applying the fonts across your Angular application.
Standalone Component Setup
If you're using Angular's standalone components, follow these steps:
1. Provide Nova Components
Add the provideNovaComponents function to your app.config.ts file to make Nova Web Components available across your application:
import { provideNovaComponents } from '@nova-design-system/nova-angular';
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes), provideNovaComponents()],
};2. Import Nova Components Module in Your Standalone Components
For any standalone component where you want to use Nova Components, add the NovaComponentsModule to the imports array in the component decorator:
import { NovaComponentsModule } from '@nova-design-system/nova-angular';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, NovaComponentsModule],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// Your component logic here
}Module-Based Setup
If you're using Angular modules, the setup is even simpler:
1. Import Nova Components Module
In the module where you want to use Nova components, add the NovaComponentsModule to the imports array. This automatically adds the required providers:
import { NovaComponentsModule } from '@nova-design-system/nova-angular';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
NovaComponentsModule // Add NovaComponentsModule here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}By including NovaComponentsModule in your imports, Nova's web components become available throughout the module.
Usage Example
Once set up, you can use Nova components in your Angular templates just like any other Angular component. Here’s an example of using an nv-button:
<nv-button danger (click)="incrementCount()">Count is {{ count }}</nv-button>In your component class, you can manage the button's behavior:
export class AppComponent {
count = 0;
incrementCount() {
this.count++;
}
}Handling Angular Forms with Nova Components
Nova Components Angular also supports seamless integration with Angular's reactive forms and template-driven forms through the NovaComponentsValueAccessorModule. This module provides value accessor directives that allow Nova components to work effortlessly with Angular forms.
Standalone Component Setup
When working with standalone components, you can easily integrate Nova components with Angular forms by importing the NovaComponentsValueAccessorModule. Here’s how you can set it up:
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { FormsModule } from '@angular/forms';
import {
NovaComponentsModule,
NovaComponentsValueAccessorModule,
} from '@nova-design-system/nova-angular';
@Component({
selector: 'app-root',
standalone: true,
imports: [
RouterOutlet,
NovaComponentsModule,
FormsModule,
NovaComponentsValueAccessorModule, // Import the Value Accessor Module here
],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {}This setup allows Nova components to be used seamlessly with Angular forms in your standalone components.
Module-Based Setup
If you're using Angular modules, you can also integrate the value accessors by importing the NovaComponentsValueAccessorModule in your module:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {
NovaComponentsModule,
NovaComponentsValueAccessorModule,
} from '@nova-design-system/nova-angular';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
FormsModule,
NovaComponentsModule, // Add NovaComponentsModule here
NovaComponentsValueAccessorModule, // Import the Value Accessor Module here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}This setup ensures that Nova components are fully compatible with Angular forms throughout your module.
Usage Example with Angular Forms
With the value accessors set up, you can now use Nova components within Angular forms. Here's an example:
<form>
<nv-fieldtext [(ngModel)]="inputValue" name="input"></nv-fieldtext>
<button type="submit">Submit</button>
</form>In your component:
export class AppComponent {
inputValue = 'hello';
}This setup allows you to use nv-fieldtext just like any other Angular form control, complete with two-way binding and validation.
Conclusion
Nova Components Angular provides an easy and flexible way to incorporate Nova's UI components into your Angular projects, whether you prefer using standalone components or a module-based approach. Follow the setup steps corresponding to your preferred method, and you’ll be ready to start building with Nova components in your Angular applications.
For more detailed documentation and examples, refer to the official Nova documentation.