Primus SaaS Angular UI modules and services.
npm install primus-angular-ui``bash`
npm install primus-angular-ui
- 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' })
]
});
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:
[socialProviders]="['azure', 'auth0', 'google']">
`
})
export class AppComponent {}
You can also import PrimusUiModule into a standalone component if you prefer module-style grouping.
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.
`
$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
[steps]="steps"
[activeStep]="1"
[completedSteps]="[0]"
>
(back)="onBack()"
(next)="onNext()"
>
`$3
`html
backLabel="Back"
nextLabel="Next"
(back)="onBack()"
(next)="onNext()"
>
`$3
`html
24,910
`
$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'
}
});
``