Schematics

Elige configuración manual o con CLI

Core incluye cinco schematics de Angular CLI: ng-add, theme, layout, dashboard y crud-page. Ejecútalos desde el directorio que contiene angular.json, con Angular CLI 22 y los peers necesarios instalados. Sustituye neural-app por el nombre de tu aplicación en angular.json. En un workspace con varios proyectos, indica siempre --project en los generadores de aplicación; si lo omites eligen la primera aplicación. El generador theme utiliza, en cambio, un --path explícito.

Elige instalación manual o ng add. Ambas utilizan el mismo paquete y las mismas APIs públicas. Los schematics son herramientas opcionales de desarrollo, no dependencias de ejecución ni un requisito para usar los componentes.

Configura una aplicación

ng add instala la versión indicada de Core y ejecuta ng-add. Añade node_modules/@neural-ui/core/styles.scss a los estilos de build de la aplicación y provideNeuralUI() a la configuración de arranque, sin sustituir estilos ni providers existentes. No genera un componente ni configura iconos, rutas, SSR, modo oscuro o traducciones de aplicación. Revisa los cambios antes de continuar.

npx ng add @neural-ui/core@^2 --project=neural-app

Si Core ya está instalado

Si Core ya está instalado, este comando ejecuta solo su schematic de configuración y conserva la versión instalada. No ejecutes las dos alternativas de instalación. Si tu SCSS global ya importa @neural-ui/core/styles, añade --skipStyles para evitar una segunda entrada global de estilos. Esta opción omite solo los estilos; la configuración del provider sigue ejecutándose. Las ejecuciones repetidas evitan duplicar la entrada de estilos y una llamada existente a provideNeuralUI(). En workspaces con varias aplicaciones, comprueba los providers de cada una: actualmente una llamada existente en cualquier archivo del workspace evita otra inserción automática.

npx ng generate @neural-ui/core:ng-add --project=neural-app

Opciones de ng-add

Estas opciones pertenecen al schematic ng-add incluido en el paquete. Angular CLI también ofrece opciones de comando, como --dry-run en ng generate. Si no se encuentra el proyecto, utiliza la clave exacta de angular.json, no el nombre de su carpeta.

Genera estilos de tema

Este ejemplo crea src/styles/product-theme.scss. El archivo importa los estilos de Core, registra la densidad y el tema elegidos en variables CSS de aplicación e incluye un ejemplo de atributos HTML. Es un punto de partida SCSS, no una definición de defineNeuPreset. No registra el archivo generado, cambia los atributos del documento ni activa un tema automáticamente. Cárgalo expresamente desde tu SCSS global o los estilos de build si lo utilizas, evitando duplicar la hoja global de Core. Los archivos existentes se conservan salvo que indiques --force.

npx ng generate @neural-ui/core:theme \
  --name=product-theme \
  --path=src/styles \
  --density=compact \
  --theme=high-contrast

Opciones del tema

name determina el nombre del archivo SCSS; path es relativo a la raíz del workspace. Los valores por defecto no eligen el modo claro/oscuro. Consulta Temas para presets de tokens y utiliza data-theme para seleccionar el modo.

Aplica la densidad y el contraste

Los estilos de Core ya contienen las reglas de densidad y alto contraste. Aplica los atributos a html o a un contenedor de aplicación. Las variables --app-neu-* generadas registran tu elección, pero no aplican esos atributos. El modo oscuro es independiente: utiliza data-theme="dark" cuando lo necesites, como explica Temas.

<main data-neu-density="compact" data-neu-theme="high-contrast">
  <!-- Your application content -->
</main>

Genera páginas de aplicación

Cada comando crea un componente standalone OnPush con archivos TypeScript, HTML y SCSS. Por defecto se colocan bajo app/pages de la aplicación seleccionada, en una carpeta con el nombre indicado. layout compone Sidebar, Toolbar y RouterOutlet; dashboard aporta una estructura con StatsCard y Card; crud-page aporta Button, un campo de búsqueda con Signal Forms y una Table vacía con clave de fila. Son puntos de partida editables: no generan cliente API, persistencia, lógica de búsqueda ni handlers de crear/editar/eliminar. Personaliza columnas, datos, acciones y navegación para tu aplicación.

npx ng generate @neural-ui/core:layout app-shell --project=neural-app
npx ng generate @neural-ui/core:dashboard overview --project=neural-app
npx ng generate @neural-ui/core:crud-page customers --project=neural-app

Opciones de las páginas

Las mismas opciones se aplican a layout, dashboard y crud-page. --force puede sobrescribir los archivos generados, incluidas tus modificaciones posteriores; revisa primero una simulación y conserva una copia recuperable. Estos generadores no registran rutas ni imports del componente en un padre existente.

Conecta una página generada

Para el dashboard overview generado, añade esta ruta junto a las existentes, sin sustituirlas. La clase combina el nombre elegido y el tipo de generador: OverviewDashboardComponent, AppShellLayoutComponent o CustomersCrudPageComponent para los comandos anteriores. Asegúrate de proporcionar provideRouter(routes) en app.config.ts. Si prefieres renderizar el componente directamente, importa su clase en el padre y utiliza el selector app-overview. El RouterOutlet del layout generado también necesita las rutas hijas de tu aplicación.

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'overview',
    loadComponent: () =>
      import('./pages/overview/overview.component').then(
        (page) => page.OverviewDashboardComponent,
      ),
  },
];

Comprueba y personaliza

Consulta --help y utiliza --dry-run antes de generar dentro de un proyecto existente. Compila, arranca la aplicación, visita la ruta registrada y prueba teclado, cambios de valor y layout responsive. Una generación correcta no demuestra que esté implementado el comportamiento de tu aplicación. En crud-page, escribir debe actualizar el signal searchData; conectar ese valor al filtrado y a un backend sigue siendo trabajo de aplicación. Consulta las secciones API y de accesibilidad al completar cada página.

npx ng generate @neural-ui/core:crud-page --help
npx ng generate @neural-ui/core:crud-page customers \
  --project=neural-app --dry-run
npx ng build neural-app
npx ng serve neural-app