Primus SaaS Angular UI (Legacy)

Angular components and services for integrating Primus SaaS modules on Angular 16-20.

Install

``bash
npm install primus-angular-ui-legacy
`

Requirements

- Angular 16.x, 17.x, 18.x, 19.x, or 20.x
- RxJS 7.x or 8.x
- Chart.js 4.x (for chart components)

> Using Angular 21.x? Install primus-angular-ui instead.

Legacy vs Angular 21+ highlights

primus-angular-ui-legacy includes dashboard features that are not yet in the Angular 21+ package:

- Dashboard layout slots and layout options (layout, sidebarWidth, stickyHeader, etc.)
- Dashboard grid breakpoints, gaps, and primus-grid-item spans
- Data table template columns (primusColumn) and pagination (paginated, pageSize)
- Chart components (primus-line-chart, primus-bar-chart, primus-pie-chart, primus-area-chart, primus-sparkline)
- Activity feed (primus-activity-feed)

For a full feature comparison, see packages/docs/docs/frontend/getting-started/angular-legacy-matrix.md.

Module setup



`ts
import { PrimusUiModule } from 'primus-angular-ui-legacy';

@NgModule({
imports: [
PrimusUiModule.forRoot({
apiBaseUrl: 'https://api.yourdomain.com',
authToken: () => localStorage.getItem('primus_token')
})
]
})
export class AppModule {}
`

Standalone setup

`ts
import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { providePrimus, providePrimusTheme } from 'primus-angular-ui-legacy';

bootstrapApplication(AppComponent, {
providers: [
provideHttpClient(),
providePrimus({
apiBaseUrl: 'https://api.yourdomain.com',
authToken: () => localStorage.getItem('primus_token')
}),
providePrimusTheme({ defaultTheme: 'light' })
]
});
`

$3

Import the Primus components you use into each standalone component:

`ts
import { Component } from '@angular/core';
import { PrimusLoginComponent } from 'primus-angular-ui-legacy';

@Component({
selector: 'app-root',
standalone: true,
imports: [PrimusLoginComponent],
template:
[showEmailLogin]="true"
[socialProviders]="['google']">


})
export class AppComponent {}
`

You can also import PrimusUiModule into a standalone component if you prefer module-style grouping.

Components



`html





























































`

Primitives demo

A brand-agnostic composition example lives in:

- examples/angular-primus-ui-primitives-demo/primus-primitives-demo.component.ts
- examples/angular-primus-ui-primitives-demo/primus-primitives-demo.component.html
- examples/angular-primus-ui-primitives-demo/primus-primitives-demo.component.css

Primitive APIs (new)

$3

- Inputs: label, hint, error, required, forId
- Slot: default

$3

- Inputs: label, placeholder, type, name, id, value, disabled, required, hint, error
- Output: valueChange

$3

- Inputs: label, placeholder, options, value, name, id, disabled, required, hint, error, allowEmpty
- Output: valueChange

$3

- Inputs: label, hint, error, required, name, options, value, disabled, inline
- Output: valueChange

$3

- Inputs: label, description, checked, disabled, hint, error
- Output: checkedChange

$3

- Inputs: label, placeholder, name, value, rows, maxLength, disabled, required, hint, error, id
- Output: valueChange

$3

- Inputs: label, placeholder, name, value, min, max, disabled, required, hint, error, id
- Output: valueChange

$3

- Inputs: steps, activeStep, orientation, completedSteps, errorSteps, disabledSteps, clickable, linear
- Output: stepSelected

$3

- Inputs: title, subtitle
- Slots: [wizard-steps], [wizard-content], [wizard-actions]

$3

- Inputs: backLabel, nextLabel, backDisabled, nextDisabled, showBack, showNext, align, backVariant, nextVariant
- Outputs: back, next

$3

- Inputs: title, subtitle, actionLabel
- Output: action
- Slot: [summary-actions]

$3

- Inputs: title, subtitle
- Slot: [section-actions]

Theming

All primitives use CSS variables set by PrimusThemeService (for example --primus-text, --primus-border, --primus-accent, --primus-error). You can override them at the app root for custom themes.

For dashboard-specific theming and tokens, use providePrimusDashboard:

`ts
import { providePrimusDashboard } from 'primus-angular-ui-legacy';

bootstrapApplication(AppComponent, {
providers: [
providePrimusDashboard({
theme: {
colors: {
primary: '#3b82f6',
background: '#ffffff',
surface: '#f8fafc',
text: '#0f172a'
},
spacing: {
sm: '8px',
md: '16px',
lg: '24px'
},
borderRadius: 8,
darkMode: 'auto'
}
})
]
});
`

Validation patterns

- Use the error input on form components to show error text and mark inputs as invalid.
- Use the hint input for helper text when there is no error.

Accessibility notes

- Stepper items are buttons and support keyboard focus.
- Toggles expose role="switch" and aria-checked.
- Inputs set aria-invalid when error is provided.

Component prop highlights (one by one)

$3

`html
[apiUrl]="'https://api.yourdomain.com'"
theme="dark"
[pollInterval]="3000"
>
`

$3

`html
[apiUrl]="'https://api.yourdomain.com'"
[pollInterval]="3000"
[userId]="'user-123'"
>
`

$3

`html
[amount]="499"
currency="USD"
[apiUrl]="'https://api.yourdomain.com'"
(onSuccess)="handlePayment($event)"
(onError)="handlePaymentError($event)"
>
`

$3

`html
[apiUrl]="'https://api.yourdomain.com'"
>
`

$3

`html
[document]="doc"
(onClose)="closeViewer()"
(onDownload)="downloadDoc()"
>
`

$3

`html
[apiUrl]="'https://api.yourdomain.com'"
(onUploadComplete)="onFileUploaded($event)"
>
`

$3

`html
title="AI Copilot"
placeholder="Ask me anything..."
mode="complete"
[apiUrl]="'https://api.yourdomain.com'"
(responded)="handleAi($event)"
>
`

$3

`html
title="Welcome Back"
subtitle="Enter your credentials"
[showEmailLogin]="true"
[socialProviders]="['google','github']"
authEndpoint="/api/auth"
theme="light"
[useService]="true"
(onLogin)="onLogin($event)"
(onSocialLogin)="onSocial($event)"
>
`

$3

`html
[user]="currentUser"
[showLogout]="true"
[useService]="true"
(loggedOut)="onLoggedOut()"
>
`

$3

`html
[columns]="columns"
[data]="rows"
[selectable]="true"
(onRowClick)="onRowClick($event)"
(onSelectionChange)="onSelection($event)"
>
`

$3

`html
title="Monthly Revenue"
[value]="'$98,200'"
delta="+12%"
trend="up"
[sparkline]="[12, 15, 13, 18, 22]"
>
`

$3

`html
[items]="activities"
[showTimestamps]="true"
>
`

$3

`html

`

$3

`html
[ranges]="['Today', 'Last 7 days', 'Last 30 days']"
(rangeChange)="onDateRangeChange($event)"
>
`

$3

`html
[filters]="filterConfig"
[activeFilters]="activeFilters"
(filterChange)="onFilterChange($event)"
>
`

$3

`html
placeholder="Search..."
[debounce]="300"
(search)="onSearch($event)"
>
`

$3

`html
[formats]="['CSV', 'PDF', 'PNG']"
(export)="handleExport($event)"
>
`



$3



`html
[open]="isOpen"
title="Confirm Action"
size="md"
(onClose)="isOpen = false"
>
Modal content goes here.

Confirm

`

$3

`html
title="Overview"
subtitle="Key metrics"
>
`

Slots and layout options:

`html
[layout]="'sidebar-content'"
[showHeader]="true"
[showFooter]="true"
[sidebarWidth]="280"
>


Last refreshed: 2m ago

`

$3

`html



`

Grid item spans:

`html








`

$3

`html
[labels]="['Mon', 'Tue', 'Wed', 'Thu']"
[series]="[{ name: 'Revenue', data: [12, 18, 14, 22] }]"
>
`

$3

`html
[labels]="['Q1', 'Q2', 'Q3', 'Q4']"
[series]="[{ name: 'Pipeline', data: [20, 14, 18, 26] }]"
[stacked]="false"
>
`

$3

`html
[labels]="['Direct', 'Referral', 'Paid']"
[series]="[{ name: 'Traffic', data: [55, 25, 20] }]"
[donut]="true"
>
`

$3

`html
[labels]="['Jan', 'Feb', 'Mar', 'Apr']"
[series]="[{ name: 'Active Users', data: [120, 140, 155, 180], fill: true }]"
>
`

$3

`html
[series]="[{ name: 'Trend', data: [12, 14, 11, 18, 17] }]"
[height]="32"
>
`



$3



`html
[title]="'Primus Admin'"
[breadcrumbs]="breadcrumbs"
[user]="currentUser"
(onUserClick)="onUserClick()"
>
`

$3

`html
[items]="navItems"
[activeId]="activeNavId"
(onItemClick)="onNavClick($event)"
>
`

$3

`html



`

$3

`html
[transactions]="transactions"
(onTransactionClick)="onTransactionClick($event)"
>
`

$3

`html
flagKey="beta-dashboard"
[apiUrl]="'https://api.yourdomain.com'"
(toggled)="onFlagToggled($event)"
>
`

$3

`html
userId="user-123"
[apiUrl]="'https://api.yourdomain.com'"
>
`

$3

`html
cardHolder="Jane Doe"
last4="4242"
expiry="12/26"
brand="visa"
variant="platinum"
>
`

$3

`html
[apiUrl]="'https://api.yourdomain.com'"
>
`

$3

`html
userId="user-123"
[apiUrl]="'https://api.yourdomain.com'"
>
`

$3

`html
[apiUrl]="'https://api.yourdomain.com'"
>
`

$3

`html

`

$3

`html
[apiUrl]="'https://api.yourdomain.com'"
>
`

$3

`html
[apiUrl]="'https://api.yourdomain.com'"
>
`

$3

`html
[apiUrl]="'https://api.yourdomain.com'"
>
`

$3

`html

`

$3

`html
[apiUrl]="'https://api.yourdomain.com'"
>
`

$3

`html
[apiUrl]="'https://api.yourdomain.com'"
>
`

$3

`html
[apiUrl]="'https://api.yourdomain.com'"
>
`

$3

`html
Primary
`

$3

`html

`

$3

`html



`

$3

`html

`

$3

`html

`

$3

`html

`

$3

`html

`

$3

`html

`

$3

`html

`

$3

`html

`

$3

`html
[steps]="steps"
[activeStep]="1"
[completedSteps]="[0]"
(stepSelected)="onStepSelected($event)"
>
`

$3

`html



(back)="onBack()"
(next)="onNext()"
>

`

$3

`html
backLabel="Back"
nextLabel="Next"
(back)="onBack()"
(next)="onNext()"
>
`

$3

`html





`

$3

`html

Section content here.

`

React to Angular parity checklist

| React component | Angular selector | Notes |
| --- | --- | --- |
| AICopilot | primus-ai-copilot | Inputs: apiUrl, endpoint, mode, title, placeholder. Output: responded. |
| UserProfile | primus-user-profile | Inputs: user, useService, showLogout, logoutEndpoint. Output: loggedOut. |
| PrimusLogin | primus-login | Inputs: title, subtitle, logo, showEmailLogin, socialProviders, authEndpoint, theme, useService. Outputs: onLogin, onSocialLogin, loggedIn. |
| PrimusNotificationCenter | primus-notification-center | Inputs: apiUrl, theme, pollInterval. |
| NotificationFeed | primus-notification-feed | Inputs: apiUrl, pollInterval, userId. |
| SecurityDashboard | primus-security-dashboard | Inputs: apiUrl, listEndpoint. |
| DocumentViewer | primus-document-viewer | Inputs: document (or templateId/data/format). Outputs: onClose, onDownload. |
| CheckoutForm | primus-checkout-form | Inputs: amount, currency, apiUrl. Outputs: onSuccess, onError. |
| FileUploader | primus-file-uploader | Inputs: apiUrl, accept, multiple. Output: onUploadComplete. |
| PrimusDataTable | primus-data-table | Inputs: columns, data, selectable. Outputs: onRowClick, onSelectionChange. |
| PrimusModal | primus-modal | Inputs: open, title, size. Output: onClose. |
| PrimusDashboard | primus-dashboard | See component inputs. |
| PrimusDashboardGrid | primus-dashboard-grid | Inputs: columns. |
| PrimusHeader | primus-header | Inputs: title, breadcrumbs, user. Output: onUserClick. |
| PrimusSidebar | primus-sidebar | Inputs: items, activeId. Output: onItemClick. |
| PrimusLayout | primus-layout | Inputs: sidebar, header, darkMode. |
| TransactionHistory | primus-transaction-history | Outputs: transactionClick, onTransactionClick. |
| FeatureFlagToggle | primus-feature-flag-toggle | Inputs: flagKey, apiUrl. Output: toggled. |
| KYCVerification | primus-kyc-verification | Inputs: userId, apiUrl. |
| CreditCardVisual | primus-credit-card | Inputs: cardHolder, last4, expiry, brand, variant. |
| AccountDashboard | primus-account-dashboard | Inputs: apiUrl. |
| CreditScoreCard | primus-credit-score-card | Inputs: userId, apiUrl. |
| LoanCalculator | primus-loan-calculator | Inputs: apiUrl. |
| LogViewer | primus-log-viewer | See component inputs. |
| FraudDetectionDashboard | primus-fraud-detection-dashboard | Inputs: apiUrl. |
| ClaimStatusTracker | primus-claim-status-tracker | Inputs: apiUrl. |
| ClaimTracker | primus-claim-tracker | Inputs: apiUrl. |
| PolicyCard | primus-policy-card | See component inputs. |
| PremiumCalculator | primus-premium-calculator | Inputs: apiUrl. |
| QuoteComparison | primus-quote-comparison | Inputs: apiUrl. |
| AgentDirectory | primus-agent-directory | Inputs: apiUrl. |

Endpoint overrides

`ts
PrimusUiModule.forRoot({
apiBaseUrl: 'https://api.yourdomain.com',
endpoints: {
authLogin: '/identity/login',
notifications: '/notifications/realtime',
featureFlagsToggle: '/feature-flags/{key}/toggle',
paymentsCheckout: '/payments/create-intent',
documentsRender: '/documents/render'
}
});
`

Portal playground endpoints

`ts
PrimusUiModule.forRoot({
apiBaseUrl: 'https://api.yourdomain.com',
endpoints: {
notifications: '/playground/notifications',
featureFlags: '/playground/feature-flags',
featureFlagsToggle: '/playground/feature-flags/{key}/toggle',
paymentsCheckout: '/playground/payments/create-intent',
storageUpload: '/playground/storage/upload',
loggingQuery: '/playground/logging/query',
securityScan: '/playground/security/scan',
documentsRender: '/playground/documents/render'
}
});
``