Primus SaaS Angular UI

Angular components and services for integrating Primus SaaS modules.

Install

``bash
npm install primus-angular-ui
`

Requirements

- Angular 21.x
- RxJS 7.x or 8.x

> On Angular 16-20, install primus-angular-ui-legacy.



Module setup



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

@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';

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';

@Component({
selector: 'app-root',
standalone: true,
imports: [PrimusLoginComponent],
template:
[showEmailLogin]="true"
[socialProviders]="['azure', 'auth0', '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.

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]="['azure', 'auth0', '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
[open]="isOpen"
title="Confirm Action"
size="md"
(onClose)="isOpen = false"
>
Modal content goes here.

Confirm

`

$3

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

$3

`html



`

$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'
}
});
``