Skip to main content
Neural UIv2.0.3Documentation
View v1 GitHub

Migrate 1.x to 2.x

Plan the generation upgrade using published declarations, public entrypoints and explicit state ownership.

Upgrade in an isolated branch

Core 2 is a generation upgrade, not a drop-in 1.x patch. This guide compares the published 1.15.2 and 2.0.1 declarations. Inventory the entrypoints and bindings your application uses, create an isolated branch, lock Angular/CDK 22 and TypeScript to supported versions, then replace one feature at a time. Keep the existing production bundle until consumer tests pass. Do not install aliases for obsolete 1.x inputs.

Imports, styles and icons

Use public @neural-ui/core/<entrypoint> imports and the public styles entrypoint. The old @neural-ui/core/icon entrypoint is absent in v2: project SVG or use the optional icon resolver; Neural Icons remains a separate optional package. Button keeps its selector and adds tone. Compare your theme tokens with token-manifest instead of copying private CSS selectors.

example.ts
import { NeuButtonComponent } from '@neural-ui/core/button';
import { NeuInputComponent } from '@neural-ui/core/input';
// styles.scss: @use '@neural-ui/core/styles' as *;

Forms and field names

For Input, rename maxlength/minlength bindings to maxLength/minLength. Prefer [formField] for Signal Forms and let the field own validation, disabled, touched, dirty and reset. Published v2 also supports the Angular 22 forms bridge for [formControl], formControlName and ngModel where the component contract permits it; do not infer incompatibility just because a component no longer declares a CVA provider. Choose one form owner per control and verify the actual integration, not a parallel CVA wrapper.

Select and controlled state

Select replaces multiple with mode='single' or mode='multiple'; review value shape accordingly. editable, identityConfig and urlParam are removed. Configure selectionOptions and filterOptions through their public types. The parent owns open/value when bound. A proposal may be rejected without the child mutating the accepted state. Move URL synchronization to the application router and test object reconstruction with stable identifiers.

example.ts
import { Component, signal } from '@angular/core';
import { NeuSelectComponent } from '@neural-ui/core/select';

@Component({
  imports: [NeuSelectComponent],
  template: `<neu-select
    mode="multiple"
    label="Teams"
    [options]="teams"
    [(value)]="selected"
  />`,
})
export class MigratedSelection {
  readonly teams = [{ label: 'Design', value: 'design' }];
  readonly selected = signal<readonly string[]>([]);
}

Table and TreeTable

Table consolidates many individual 1.x inputs into typed options, layout and dataMode. Rebuild the query/selection/metadata contract from the v2 API rather than mechanically renaming a boolean. TreeTable replaces nodes with data plus a separately owned hierarchy object; roots and children have independent relation state and revisions. Remote responses must apply the matching request IDs and query revisions. Export scope must distinguish loaded rows from remote result sets.

Verify before removing the old installation

Compile your application against the packed public package with no source aliases. Verify each migrated form and controlled proposal, keyboard/focus, empty/error/loading states, remote races, cancellation and export. Run a real SSR consumer and confirm useful initial HTML, DOM reuse, no NG050x and exactly one first interaction. Review bundle changes against your current baseline. Any further breaking change after public 2.0.1 requires an explicit SemVer decision, not a hidden compatibility alias.