Enterprise Angular Components

A reusable Angular library blueprint for enterprise applications. It ships five standalone building blocks that can be imported independently in any feature, shell, or micro-frontend:

1. Permission Directive (entHasPermission) for policy-aware rendering.
2. Workflow Timeline (ent-workflow-timeline) for audit trails and process state.
3. Smart Table (ent-smart-table) for reactive sorting, filtering, paging, and selection.
4. Dynamic Form Renderer (ent-dynamic-form-renderer) for schema-driven forms.
5. Query Builder (ent-query-builder) for user-generated filter expressions.

Architecture principles

• Standalone Angular APIs: every directive/component is standalone and tree-shakeable.
• SOLID: models, state services, and UI rendering are separated; custom permission evaluation is injected through an InjectionToken.
• Reactive state: component state is modeled with BehaviorSubject, derived with combineLatest, and shared with shareReplay for efficient OnPush templates.
• Dynamic rendering: forms and query rules are generated from schemas rather than hard-coded feature templates.
• Enterprise extensibility: all public contracts are exported from src/public-api.ts, inputs accept static data or observable sources where useful, and comments document extension points.

Installation in another Angular workspace

npm install @dhinesh-se/angular-components

If using this repository directly during development:

npm install
npm run build

Permission Directive

Hydrate permissions at login, from a route resolver, or from a state-management effect:

constructor(permissionStore: PermissionStore) {
  permissionStore.setPermissions(['invoice.read', 'invoice.approve']);
}

Use the directive anywhere a structural directive is valid:

<button *entHasPermission="['invoice.approve']; mode: 'all'; else denied">
  Approve invoice
</button>
<ng-template #denied let-decision="decision">
  Missing: {{ decision.missing.join(', ') }}
</ng-template>

Override policy logic by providing PERMISSION_EVALUATOR with your own PermissionEvaluator implementation.

Workflow Timeline

<ent-workflow-timeline
  [steps]="workflowSteps$"
  [config]="{ orientation: 'vertical', showMetadata: true }"
  (stepSelected)="openStep($event)" />

steps can be an array or an Observable<WorkflowStep[]>.

Smart Table

<ent-smart-table
  [data]="customers$"
  [config]="tableConfig"
  (stateChange)="persistTableState($event)"
  (selectionChange)="bulkSelection = $event" />

tableConfig = {
  idSelector: (row: Customer) => row.id,
  columns: [
    { key: 'name', label: 'Name', sortable: true },
    { key: 'tier', label: 'Tier', filterable: true },
  ],
};

Dynamic Form Renderer

<ent-dynamic-form-renderer
  [schema]="customerSchema"
  [value]="customer"
  (formSubmit)="save($event.value)" />

customerSchema = {
  id: 'customer-onboarding',
  title: 'Customer onboarding',
  submitLabel: 'Create customer',
  fields: [
    { key: 'name', label: 'Name', type: 'text' },
    { key: 'tier', label: 'Tier', type: 'select', options: [{ label: 'Gold', value: 'gold' }] },
  ],
};

Fields can declare visibleWhen and disabledWhen predicates for conditional enterprise forms.

Query Builder

<ent-query-builder
  [fields]="queryFields"
  [showPreview]="true"
  (queryChange)="filters = $event" />

queryFields = [
  { key: 'status', label: 'Status', type: 'enum', operators: ['eq', 'neq'], options: [{ label: 'Active', value: 'active' }] },
  { key: 'createdAt', label: 'Created at', type: 'date', operators: ['gte', 'lte'] },
];

The emitted QueryGroup AST can be translated to REST query params, GraphQL filters, or backend-specific search DSLs in an application adapter.

Enhanced Query Builder UX (v0.3.0)

ent-query-builder now includes richer built-in behavior:

• Type-aware inputs: enum fields render as dropdowns, boolean fields render as true/false selectors.
• Live summary (showSummary, default true): displays a readable sentence for active rules.
• Compiled preview (showCompiledPreview + previewDialect): preview SQL/Mongo/OData output directly in UI.

<ent-query-builder
  [fields]="queryFields"
  [showPreview]="true"
  [showSummary]="true"
  [showCompiledPreview]="true"
  previewDialect="sql"
  (queryChange)="filters = $event" />

Query Compiler (new)

To make the Query Builder more production-ready, this package now includes a Query Compiler utility.

It converts the emitted QueryGroup AST into backend-friendly filter syntax for:

• SQL-like WHERE fragments
• MongoDB query snippets
• OData $filter expressions

import { compileQuery, describeQuery } from '@dhinesh-se/angular-components';

const sql = compileQuery(filters, { dialect: 'sql', fieldMap: { createdAt: 'created_at' } });
const mongo = compileQuery(filters, { dialect: 'mongo' });
const odata = compileQuery(filters, { dialect: 'odata' });
const summary = describeQuery(filters, queryFields);

This keeps UI concerns in the component while giving teams a reusable adapter layer for API integration.

Project layout

src/lib/permission              Permission store, evaluator, and directive
src/lib/workflow-timeline       Timeline component and workflow contracts
src/lib/smart-table             Table contracts and reactive table component
src/lib/dynamic-form            Form schema contracts and renderer
src/lib/query-builder           Query AST contracts and recursive builder
src/lib/shared                  Small shared RxJS/state helpers
src/public-api.ts               Public exports for consumers

Open-source project

This package is prepared for open-source distribution under the MIT License. Community guidelines, contribution steps, security reporting, and release notes are maintained in:

• LICENSE
• CONTRIBUTING.md
• CODE_OF_CONDUCT.md
• SECURITY.md
• CHANGELOG.md

Publishing

Build artifacts are published from dist/enterprise-components, not from the repository root. The shortest safe flow is npm install, npm run build, npm run pack:dry-run, npm run publish:dry-run, then npm run publish:public. See PUBLISHING.md for the full step-by-step npm login, versioning, dry-run, public/private registry, verification, and CI/CD publishing guide.

Quality checklist

• Keep feature-specific business rules outside these components.
• Prefer immutable inputs and observable streams for server-driven data.
• Provide adapters at application boundaries for auth, persistence, and backend query translation.
• Add design-system wrappers if your enterprise has a shared token or theming layer.

Cross-component enhancements (v0.4.0)

• Dynamic Form: supports field section, schema description, and live completion progress UI.
• Smart Table: shows selected row count, clear-selection button, and emits rowClicked.
• Workflow Timeline: can show completed-step progress banner via config.showProgress.
• Permission Directive: permission decisions now include matched permissions for richer UI context.

Development

Setup

npm install

Lint

npm run lint

Test

npm test

Build

npm run build