9 min read - How SoarUI Accelerates Angular Development for Enterprise Teams

Enterprise Angular teams face a recurring problem: they spend weeks — sometimes months — rebuilding the same UI primitives for every new project. Data tables with sorting, filtering, and pagination. Multi-step form wizards with validation. Dashboard layouts with responsive grids. These components are table stakes for any internal tool or customer-facing application, yet teams keep writing them from scratch because existing libraries do not fit their design system or lack the flexibility enterprise projects demand.

SoarUI was built to solve this. It is an open-source Angular component library that sits on top of Angular Material and the CDK, providing production-ready enterprise components that teams can adopt incrementally without rewriting their existing codebase.

What you'll learn

• Why enterprise Angular teams lose time on UI primitives and how to reclaim it
• What SoarUI provides: pre-built components, design tokens, accessibility defaults, and Signals support
• How SoarUI compares to PrimeNG, Nebular, and other Angular component libraries
• A practical guide to integrating SoarUI into an existing Angular project
• Concrete examples of development time savings on real enterprise patterns

TL;DR

SoarUI is an open-source Angular component library built on Angular Material and CDK that provides enterprise-grade components — data tables, form builders, dashboard layouts, and more — with design token theming, WCAG 2.1 AA accessibility defaults, and Angular Signals integration. Teams adopting SoarUI typically reduce UI development time by 40-60% on enterprise projects by eliminating the need to build and maintain custom UI primitives.

The Problem: Enterprise Teams Keep Rebuilding the Same Components

Walk into any enterprise Angular project and you will find the same pattern. The team needs a data table that handles server-side pagination, column resizing, row selection, inline editing, and export. Angular Material's mat-table provides a solid foundation, but it is deliberately low-level. You still need to wire up pagination, write sorting logic, handle loading states, implement column configuration, and build the toolbar.

That is two to three weeks of work for a senior developer. Multiply it across every project in the organization, and the cost is staggering.

The same applies to forms. Enterprise applications are form-heavy. A typical onboarding workflow might include 40+ fields across 5 steps, with conditional visibility rules, cross-field validation, and draft saving. Building that from raw ReactiveFormsModule primitives is tedious and error-prone.

Then there are the cross-cutting concerns: consistent theming across applications, accessibility compliance, responsive behavior, internationalization. Each of these adds another layer of work that has nothing to do with the business logic the team was hired to deliver.

What SoarUI Is

SoarUI is an open-source Angular component library designed specifically for enterprise use cases. It builds on Angular Material and the Angular CDK rather than replacing them, which means teams already using Material can adopt SoarUI incrementally.

The library provides three categories of value:

High-level enterprise components. These are the complex widgets that every enterprise application needs but that take weeks to build: advanced data tables, form builders, dashboard grids, stepper workflows, file uploaders with preview, and notification systems.

Design token system. SoarUI uses CSS custom properties organized into a structured token hierarchy. Teams define their brand tokens (colors, typography, spacing) once, and every component inherits them automatically. Switching themes — including dark mode — requires changing token values, not rewriting component styles.

Framework-level integration. SoarUI is built with Angular Signals from the ground up. Components expose reactive state through signals rather than relying solely on RxJS observables, which simplifies change detection and improves performance in large applications.

Key Features in Detail

Pre-Built Enterprise Components

Advanced Data Table. The soar-data-table component handles the full spectrum of enterprise table requirements:

<soar-data-table
  [dataSource]="employeeDataSource"
  [columns]="columnConfig"
  [pagination]="{ pageSize: 25, pageSizeOptions: [10, 25, 50, 100] }"
  [sortable]="true"
  [filterable]="true"
  [selectable]="true"
  [exportFormats]="['csv', 'xlsx']"
  (rowAction)="onRowAction($event)">
</soar-data-table>

Column configuration is declarative. You define columns as data, not templates, which makes it straightforward to let users customize their own views:

columnConfig: SoarColumnDef[] = [
  { key: 'name', label: 'Employee Name', sortable: true, filterable: true },
  { key: 'department', label: 'Department', filterType: 'select', filterOptions: departments },
  { key: 'startDate', label: 'Start Date', type: 'date', sortable: true },
  { key: 'salary', label: 'Salary', type: 'currency', align: 'right' },
  { key: 'actions', label: '', type: 'actions', actions: ['edit', 'archive'] },
];

This replaces what typically takes 800-1200 lines of custom template and logic code with a configuration object and a single component tag.

Form Builder. The soar-form-builder generates complex forms from a JSON schema, handling layout, validation, conditional logic, and multi-step navigation:

formSchema: SoarFormSchema = {
  steps: [
    {
      title: 'Personal Information',
      fields: [
        { key: 'firstName', type: 'text', label: 'First Name', required: true },
        { key: 'lastName', type: 'text', label: 'Last Name', required: true },
        { key: 'email', type: 'email', label: 'Email', validators: ['email'] },
        { key: 'role', type: 'select', label: 'Role', options: roleOptions },
      ],
    },
    {
      title: 'Access & Permissions',
      fields: [
        { key: 'accessLevel', type: 'radio', label: 'Access Level', options: accessLevels },
        {
          key: 'modules',
          type: 'checkbox-group',
          label: 'Modules',
          visibleWhen: { field: 'accessLevel', value: 'custom' },
        },
      ],
    },
  ],
}

Dashboard Layouts. The soar-dashboard component provides a responsive grid system with drag-and-drop widget placement, configurable breakpoints, and persistent layout preferences. Teams drop in chart components, stat cards, and data widgets without writing CSS grid or flexbox logic.

Design Tokens

SoarUI's theming system uses a three-tier token architecture:

/* Tier 1: Global tokens (brand values) */
--soar-color-primary: #1a56db;
--soar-color-neutral-100: #f3f4f6;
--soar-font-family-base: 'Inter', sans-serif;
--soar-spacing-unit: 4px;

/* Tier 2: Semantic tokens (intent-based) */
--soar-color-action: var(--soar-color-primary);
--soar-color-surface: var(--soar-color-neutral-100);
--soar-color-text-primary: var(--soar-color-neutral-900);

/* Tier 3: Component tokens (scoped) */
--soar-button-bg: var(--soar-color-action);
--soar-table-header-bg: var(--soar-color-surface);

This means a single change to --soar-color-primary cascades through every component in the application. Enterprise teams with multiple Angular applications can share a single token file to maintain visual consistency across their entire portfolio.

Accessibility by Default

Every SoarUI component ships with WCAG 2.1 AA compliance built in:

• Proper ARIA attributes and roles applied automatically
• Keyboard navigation for all interactive components (tables, menus, dialogs, form controls)
• Focus management in modals and steppers
• Color contrast ratios enforced through the token system
• Screen reader announcements for dynamic content updates

Teams do not need to bolt on accessibility after the fact. It is part of the component API. This alone can save enterprise teams the cost of a dedicated accessibility audit and remediation cycle, which typically runs four to six weeks.

Angular Signals Integration

SoarUI components use Angular Signals for state management, aligning with Angular's modern reactivity model:

@Component({
  template: `
    <soar-data-table
      [dataSource]="employees()"
      [loading]="isLoading()"
      (selectionChange)="selectedRows.set($event)"
    >
    </soar-data-table>
    <p>{{ selectedRows().length }} rows selected</p>
  `,
})
export class EmployeeListComponent {
  employees = signal<Employee[]>([])
  isLoading = signal(true)
  selectedRows = signal<Employee[]>([])
}

This eliminates the need for manual subscription management, reduces memory leaks from forgotten unsubscribe calls, and works seamlessly with Angular's OnPush change detection strategy.

How SoarUI Reduces Development Time

Here are concrete comparisons based on common enterprise patterns:

On a typical enterprise project with 10-15 major views, this compounds into months of saved effort. That time goes back into building the business logic, integrations, and workflows that actually differentiate the product.

Integration with Existing Angular Projects

SoarUI is designed to coexist with existing Angular Material setups. You do not need to rip out your current components to start using it.

Step 1: Install the package.

npm install @soarui/components @soarui/tokens

Step 2: Import the module for the components you need.

import { SoarDataTableModule, SoarFormBuilderModule } from '@soarui/components'

@NgModule({
  imports: [
    MaterialModule, // your existing Material setup
    SoarDataTableModule,
    SoarFormBuilderModule,
  ],
})
export class FeatureModule {}

Or with standalone components:

@Component({
  standalone: true,
  imports: [SoarDataTable, SoarFormBuilder],
  template: `...`,
})
export class FeatureComponent {}

Step 3: Apply design tokens. Add the SoarUI token stylesheet to your angular.json or import it in your global styles:

@import '@soarui/tokens/default-theme';

// Override with your brand values
:root {
  --soar-color-primary: #your-brand-color;
  --soar-font-family-base: 'Your Brand Font', sans-serif;
}

Existing Angular Material components continue to work unchanged. You can migrate incrementally, replacing homegrown components with SoarUI equivalents one at a time.

Comparison with Other Angular Component Libraries

SoarUI vs. PrimeNG

PrimeNG offers a massive component catalog (80+ components) and has been the go-to choice for Angular UI needs for years. However, PrimeNG components are built independently from Angular Material, which means teams using both end up with styling conflicts and inconsistent behavior. PrimeNG's theming system, while powerful, uses its own approach that does not integrate with Angular Material's theming.

SoarUI builds on Material and CDK, so there is no conflict. Teams already using Angular Material gain higher-level components without abandoning their existing foundation.

SoarUI vs. Nebular

Nebular (from Akveo) provides a design system with Eva Design System integration. It is well-suited for admin panels and dashboards. However, Nebular's development has slowed significantly, and it does not yet support Angular Signals or standalone components. Its component set is narrower than what enterprise teams typically need.

SoarUI is actively maintained, supports modern Angular features, and focuses specifically on enterprise use cases that Nebular's component set does not fully cover.

SoarUI vs. Building In-House

Some enterprise teams build their own component libraries. This makes sense when the organization has unique design requirements that no existing library can satisfy. But maintaining a component library is expensive — it requires dedicated engineers, documentation, testing infrastructure, and upgrade maintenance with every Angular major version.

SoarUI provides the foundation so internal teams can focus on the truly unique components their business needs, rather than rebuilding data tables for the fourth time.

Getting Started

1. Evaluate your current component inventory. Audit your existing Angular applications to identify which UI patterns repeat across projects. Data tables, forms, and navigation layouts are almost always on the list.

2. Start with one component. Pick the component that causes the most pain — usually the data table or form builder — and replace your homegrown version with SoarUI's equivalent on a single project.

3. Apply design tokens. Configure the token system to match your brand. This is a one-time investment that pays off across every SoarUI component you adopt.

4. Expand incrementally. Once the first component proves itself, roll out additional SoarUI components across the project. Then standardize across your organization.

5. Contribute back. SoarUI is open source. If you build a component that other enterprise teams would benefit from, contribute it upstream. Check the SoarUI project page for contribution guidelines.

Conclusion: Stop Rebuilding, Start Shipping

Enterprise Angular teams exist to deliver business value, not to rebuild data tables. SoarUI provides the pre-built, accessible, themeable components that enterprise projects demand, built on the Angular Material and CDK foundation that teams already know.

The result is less time on UI plumbing and more time on the features that matter to your users. If your team is starting a new Angular project — or maintaining several — explore SoarUI and see how much development time you can reclaim. And if you need help integrating a component library into your enterprise Angular stack, get in touch.