Angular
Install CLI
Install the Elements CLI to your system. This will add the nve command to your path and provide several helpful commands for working with Elements.
curl -fsSL https://nvidia.github.io/elements/install.sh | bash
curl -fsSL https://nvidia.github.io/elements/install.cmd -o install.cmd && install.cmd && del install.cmd
# install the CLI
npm install -g @nvidia-elements/cli
Create a New Project
Use the Elements CLI to quickly bootstrap a new angular project with the necessary dependencies:
nve project.create --type=angular
Setup an Existing Project
Setup an existing project to use Elements you can use the setup command to add the necessary dependencies and configure the MCP server.
nve project.setup
If not yet done, install NodeJS. NodeJS is a JavaScript runtime that has a large ecosystem of tooling and packages for Web Development. Once installed the Node Package Manager (NPM) will be available for use.
Manual Integration
If installing to an existing project, install the core dependencies:
# install core dependencies
npm install @nvidia-elements/themes @nvidia-elements/styles @nvidia-elements/core
To use Elements in your Angular components, add CUSTOM_ELEMENTS_SCHEMA to the schemas to allow Web Components within your template.
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@nvidia-elements/core/alert/define.js';
@Component({
selector: 'app-root',
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent { }
Properties and events then work via the standard Angular template syntax.
<!--
- [attr.hidden] - HTML Boolean attribute
- status - HTML attribute
- [closable] - can update via attributes or JavaScript property binding
- (close) - event listener binding for 'close' custom event
-->
<nve-alert-group status="success" [attr.hidden]="!showAlert">
<nve-alert [closable]="true" (close)="showAlert = false">hello there!</nve-alert>
</nve-alert-group>
Forms
Elements provides a suite of form components that leverage standard HTML input types. This enables frameworks to take advantage of built in framework features like Angular Reactive Forms for managing form validation and state.
<form [formGroup]="form" (ngSubmit)="submit()">
<nve-input>
<label>first name</label>
<input type="text" formControlName="firstName" />
<nve-control-message *ngIf="form.controls.firstName.invalid && (form.controls.firstName.dirty || form.controls.firstName.touched)">required</nve-control-message>
</nve-input>
<button>submit</button>
</form>
import { Component } from '@angular/core';
import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
standalone: true,
imports: [ReactiveFormsModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
form: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
firstName: ['', Validators.required]
});
}
submit() {
this.form.controls.custom.markAsTouched();
console.log(this.form.value);
}
}
Advanced - Import CSS Source
Lit as a standard TypeScript based library works out of the box when imported and used within an Angular application source code. This enables you to author Lit based Web Components directly within your Angular application without requiring a standalone library/project. If you are authoring Lit based components and would like to import external CSS files (like Vite Inlined Imports) you need extra Angular CLI configuration.
1. Install
npm install raw-loader
2. Update tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
}
}
3. Update Types
// declarations.d.ts
declare module 'raw-loader!*.css' {
const content: string;
export = content;
}
4. Import Styles
import { unsafeCSS } from 'lit';
import typography from 'raw-loader!node_modules/@nvidia-elements/core/css/module.typography.css';
import layout from 'raw-loader!node_modules/@nvidia-elements/core/css/module.layout.css';
// Lit Component
static override styles = [
css`${unsafeCSS(typography)}`,
css`${unsafeCSS(layout)}`
];