Smart UI for Angular - 80+ Enterprise Angular UI Components

smart-webcomponents-angular is a commercial Angular UI component library providing 84 components, including a data grid, pivot table, scheduler, Gantt chart, Kanban board, charts and a rich text editor. It ships as native Angular modules with bundled TypeScript definitions and Angular CLI schematics.

Live demos · Documentation · Theme Builder · Pricing and licensing

Contents

• What is Smart UI for Angular?
• Requirements
• Installation
• Quick start
• Angular data grid example
• Schematics
• Components
• Theming
• FAQ
• License

What is Smart UI for Angular?

Smart UI for Angular is a UI component library for building data-heavy business applications in Angular. Each component is a real Angular module with typed inputs, outputs and two-way binding support, so it fits Angular templates, forms and change detection directly.

The library targets applications that need enterprise data components, such as sortable and filterable data grids, pivot tables, schedulers and Gantt charts, rather than a general-purpose styling kit. It ships with no third-party runtime dependencies.

Requirements

| Requirement | Version | | --- | --- | | Angular | 12 - 15 | | TypeScript | Bundled definitions; no @types package required | | Browsers | Current Chrome, Edge, Firefox, Safari and Opera |

Installation

ng add smart-webcomponents-angular

ng add registers the package and wires up the default theme. To install without modifying your workspace configuration:

npm install smart-webcomponents-angular

Quick start

Import the module for each component you use:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AccordionModule } from 'smart-webcomponents-angular/accordion';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AccordionModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

<smart-accordion>
  <smart-accordion-item label="First Item">First Item Content.</smart-accordion-item>
  <smart-accordion-item label="Second Item">Second Item Content.</smart-accordion-item>
</smart-accordion>

Each component is a separate entry point, such as smart-webcomponents-angular/grid, smart-webcomponents-angular/scheduler and smart-webcomponents-angular/chart, so only the modules you import are bundled.

Angular data grid example

Reach the component API through a view child:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { GridComponent } from 'smart-webcomponents-angular/grid';

@Component({
  selector: 'app-root',
  template: '<smart-grid #grid [sorting]="sorting" [filtering]="filtering"></smart-grid>'
})
export class AppComponent implements AfterViewInit {
  @ViewChild('grid', { read: GridComponent, static: false }) grid!: GridComponent;

  sorting = { enabled: true };
  filtering = { enabled: true };

  ngAfterViewInit(): void {
    this.grid.dataSource = [
      { firstName: 'Andrew', lastName: 'Burke', quantity: 3 },
      { firstName: 'Nancy', lastName: 'Devolder', quantity: 5 }
    ];
  }
}

Schematics

Beyond ng add, the package ships Angular CLI generators:

ng generate smart-webcomponents-angular:grid       # data-grid component
ng generate smart-webcomponents-angular:tree       # tree component
ng generate smart-webcomponents-angular:dashboard  # dashboard component

Components

84 components ship in the package. Each name links to its API reference.

Data grids and tables

Grid · Table · Pivot Table · Card View · Column Panel · Group Panel · Sort Panel · Filter Panel · Filter Builder · Multi Column Filter Panel · Query Builder · Pager · Array · Sortable

Scheduling and project management

Scheduler · Gantt Chart · Kanban · Timeline · Calendar

Charts and data visualization

Chart · 3D Chart · Gauge · Tank · Led · Progress Bar · Path · Map · Bar Code · QR Code

Layout and navigation

Docking Layout · Accordion · Tabs · Window · Splitter · Menu · List Menu · Ribbon · Breadcrumb · Carousel · Card · Chip · Toast · Tooltip · Scroll Bar

Editors and inputs

Editor · Input · Text Box · Text Area · Multiline Text Box · Masked Text Box · Numeric Text Box · Number Input · Password Text Box · Password Input · Combo Box · Multi Combo Input · Multi Input · Drop Down List · Drop Down Button · List Box · Tree · Date Time Picker · Date Input · Date Range Input · Time Input · Time Picker · Check Input · Country Input · Phone Input · Color Picker · Color Panel · Color Input · File Upload · Rating · Slider · Form · Validator · Customization Dialog

Buttons

Button · Button Group · Switch Button · Radio Button · Check Box · Multi Split Button

Theming

137 prebuilt theme stylesheets ship in the package, across six families - Default, Bootstrap, Material, Fluent, Strata and Tabula - each with light and dark modes and accent-color variants. Reference one from angular.json:

"styles": [
  "node_modules/smart-webcomponents-angular/source/styles/material/dark/smart.material-dark.blue.css",
  "src/styles.css"
]

| Family | Light | Dark | Location | | --- | --- | --- | --- | | Default | 10 | 9 | source/styles/ | | Bootstrap | 12 | 12 | source/styles/bootstrap/light/, source/styles/bootstrap/dark/ | | Material | 12 | 12 | source/styles/material/light/, source/styles/material/dark/ | | Fluent | 12 | 12 | source/styles/fluent/light/, source/styles/fluent/dark/ | | Strata | 11 | 11 | source/styles/strata/light/, source/styles/strata/dark/ | | Tabula | 12 | 12 | source/styles/tabula/light/, source/styles/tabula/dark/ |

Every family except Default ships a base stylesheet plus accent variants in black, blue, cyan, green, indigo, orange, pink, purple, red, teal and turquoise. Strata omits black. The Default family uses smart.default.css with smart.<accent>.css and smart.dark-<accent>.css variants.

Dark stylesheets are named for their family, so material/dark/smart.material-dark.blue.css is the blue accent of Material Dark. Bootstrap keeps the same filenames in both folders, so the light and dark variants are distinguished by directory.

Per-component stylesheets are available in source/styles/default/ if you prefer to load only the CSS for the components you use.

Custom palettes can be generated with the Theme Builder.

Frequently asked questions

Which Angular versions are supported?

Angular 12 through 15, as declared in the package's dependency metadata.

Is Smart UI for Angular free?

No. It is a commercial library. You can evaluate it free for 30 days with full technical support; a license is required for production use. A free, open-source subset of the components is published separately as smart-webcomponents-community.

Does the package include TypeScript definitions?

Yes. Every entry point ships its own .d.ts alongside the module. No separate @types package is needed.

Does it support the Angular CLI?

Yes. ng add smart-webcomponents-angular installs and configures the package, and generators are included for grid, tree and dashboard components.

How many themes are included?

137 prebuilt stylesheets across six families: Default, Bootstrap, Material, Fluent, Strata and Tabula. Each family ships light and dark modes with accent variants in black, blue, cyan, green, indigo, orange, pink, purple, red, teal and turquoise. Custom palettes can be built with the Theme Builder.

How do I change the theme?

Reference a different stylesheet from smart-webcomponents-angular/source/styles/ in the styles array of angular.json.

Which browsers are supported?

Current versions of Chrome, Edge, Firefox, Safari and Opera.

What is the difference between Smart UI and the community edition?

The commercial package includes the full suite, with Grid, Pivot Table, Scheduler, Gantt Chart, Kanban, Editor and Docking Layout among them. The community edition contains 38 components covering inputs, buttons, layout and navigation only. See the comparison.

Related packages

| Package | Description | | --- | --- | | smart-webcomponents | The components as framework-agnostic custom elements | | smart-webcomponents-react | React components | | smart-webcomponents-community | Free, open-source subset |

License

Commercial. Free 30-day evaluation with technical support; a license is required for production use. See https://www.htmlelements.com/license/. The EULA ships in the package as EULA.pdf.

Support: [email protected] · Forum