Angular

Primus UI for Angular

Primus UI Angular package usage.

OverviewComponent listProps catalog

[!NOTE] New to Primus UI with Angular? Check out the Angular Integration Guide for step-by-step setup instructions including installation, requirements, module configuration, and standalone setup.

Angular Component Usage

This page provides usage examples for all Primus UI components in Angular. For initial project setup, see the Angular Integration Guide.

Angular component usage (one by one)

Notification Center

<primus-notification-center
  [apiUrl]="'https://api.yourdomain.com'"
  theme="dark"
  [pollInterval]="3000"
></primus-notification-center>

Notification Feed

<primus-notification-feed
  [apiUrl]="'https://api.yourdomain.com'"
  [pollInterval]="3000"
  [userId]="'user-123'"
></primus-notification-feed>

Checkout Form

<primus-checkout-form
  [amount]="499"
  currency="USD"
  [apiUrl]="'https://api.yourdomain.com'"
  (onSuccess)="handlePayment($event)"
  (onError)="handlePaymentError($event)"
></primus-checkout-form>

Security Dashboard

<primus-security-dashboard
  [apiUrl]="'https://api.yourdomain.com'"
></primus-security-dashboard>

RBAC Admin

<primus-rbac-admin
  [apiUrl]="'https://api.yourdomain.com'"
  [withCredentials]="true"
  title="RBAC Admin"
  subtitle="Roles, permissions, teams, and access checks">
</primus-rbac-admin>

Provide auth tokens via PRIMUS_CONFIG so the admin UI can call secured RBAC endpoints:

import { PRIMUS_CONFIG } from "primus-angular-ui";

providers: [
  {
    provide: PRIMUS_CONFIG,
    useValue: {
      apiBaseUrl: "https://api.yourdomain.com",
      authToken: () => localStorage.getItem("access_token")
    }
  }
]

The RBAC Admin UI expects the RBAC endpoints described in the backend integration guide: /docs/modules/rbac/integration-guide.

Document Viewer (Document Mode)

<primus-document-viewer
  [document]="doc"
  (onClose)="closeViewer()"
  (onDownload)="downloadDoc()"
></primus-document-viewer>

File Uploader

<primus-file-uploader
  [apiUrl]="'https://api.yourdomain.com'"
  (onUploadComplete)="onFileUploaded($event)"
></primus-file-uploader>

AI Copilot

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

Login

<primus-login
  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)"
></primus-login>

User Profile

<primus-user-profile
  [user]="currentUser"
  [showLogout]="true"
  [useService]="true"
  (loggedOut)="onLoggedOut()"
></primus-user-profile>

Data Table

<primus-data-table
  [columns]="columns"
  [data]="rows"
  [selectable]="true"
  (onRowClick)="onRowClick($event)"
  (onSelectionChange)="onSelection($event)"
></primus-data-table>

Search

<primus-search
  placeholder="Search users"
  [debounce]="300"
  (search)="onSearch($event)"
></primus-search>

Modal

<primus-modal
  [open]="isOpen"
  title="Confirm Action"
  size="md"
  (onClose)="isOpen = false"
>
  Modal content goes here.
  <div modal-footer>
    <button>Confirm</button>
  </div>
</primus-modal>

Dashboard

<primus-dashboard
  title="Overview"
  subtitle="Key metrics"
></primus-dashboard>

Dashboard Grid

<primus-dashboard-grid [columns]="3">
  <!-- dashboard cards here -->
</primus-dashboard-grid>

Activity Feed

<primus-activity-feed
  [items]="activityItems"
  [maxItems]="8"
  [showTimestamps]="true"
  [groupByDate]="true"
></primus-activity-feed>

Filter Bar

<primus-filter-bar
  [filters]="filters"
  [activeFilters]="activeFilters"
  (filterChange)="onFilterChange($event)"
></primus-filter-bar>

Export Menu

<primus-export-menu
  [formats]="['CSV', 'PDF']"
  (export)="onExport($event)"
></primus-export-menu>

Charts

<primus-line-chart [labels]="labels" [series]="series" [height]="320"></primus-line-chart>

Header

<primus-header
  [title]="'Primus Admin'"
  [breadcrumbs]="breadcrumbs"
  [user]="currentUser"
  (onUserClick)="onUserClick()"
></primus-header>

Sidebar

<primus-sidebar
  [items]="navItems"
  [activeId]="activeNavId"
  (onItemClick)="onNavClick($event)"
></primus-sidebar>

Layout

<primus-layout [sidebar]="true" [header]="true" [darkMode]="false">
  <!-- app content -->
</primus-layout>

Transaction History

<primus-transaction-history
  [transactions]="transactions"
  (onTransactionClick)="onTransactionClick($event)"
></primus-transaction-history>

Feature Flag Toggle

<primus-feature-flag-toggle
  flagKey="beta-dashboard"
  [apiUrl]="'https://api.yourdomain.com'"
  (toggled)="onFlagToggled($event)"
></primus-feature-flag-toggle>

KYC Verification

<primus-kyc-verification
  userId="user-123"
  [apiUrl]="'https://api.yourdomain.com'"
></primus-kyc-verification>

Credit Card

<primus-credit-card
  cardHolder="Jane Doe"
  last4="4242"
  expiry="12/26"
  brand="visa"
  variant="platinum"
></primus-credit-card>

Account Dashboard

<primus-account-dashboard
  [apiUrl]="'https://api.yourdomain.com'"
></primus-account-dashboard>

Credit Score Card

<primus-credit-score-card
  userId="user-123"
  [apiUrl]="'https://api.yourdomain.com'"
></primus-credit-score-card>

Loan Calculator

<primus-loan-calculator
  [apiUrl]="'https://api.yourdomain.com'"
></primus-loan-calculator>

Log Viewer

<primus-log-viewer></primus-log-viewer>

Fraud Detection Dashboard

<primus-fraud-detection-dashboard
  [riskScore]="32"
  [alerts]="fraudAlerts"
></primus-fraud-detection-dashboard>

Claim Status Tracker

<primus-claim-status-tracker
  claimId="CLM-1024"
  status="In Review"
  [steps]="claimSteps"
></primus-claim-status-tracker>

Claim Tracker

<primus-claim-tracker
  claimId="CLM-2048"
  status="Submitted"
  [steps]="claimSteps"
></primus-claim-tracker>

Policy Card

<primus-policy-card></primus-policy-card>

Premium Calculator

<primus-premium-calculator title="Premium Calculator"></primus-premium-calculator>

Quote Comparison

<primus-quote-comparison
  [quotes]="quotes"
></primus-quote-comparison>

Agent Directory

<primus-agent-directory
  [agents]="agents"
></primus-agent-directory>

Button

<primus-button>Primary</primus-button>

Input

<primus-input label="Email" placeholder="name@example.com"></primus-input>

Form Field

<primus-form-field label="Company">
  <input type="text" />
</primus-form-field>

Textarea

<primus-textarea label="Notes" placeholder="Enter notes"></primus-textarea>

Select

<primus-select label="Plan" [options]="planOptions"></primus-select>

Radio Group

<primus-radio-group label="Billing" [options]="billingOptions"></primus-radio-group>

Toggle

<primus-toggle label="Enable alerts" [checked]="true"></primus-toggle>

Date Picker

<primus-date-picker label="Start date"></primus-date-picker>

Date Range Picker

<primus-date-range-picker
  [ranges]="['Today', 'Last 7 days']"
  (rangeChange)="onRangeChange($event)"
></primus-date-range-picker>

Stats Card

<primus-stats-card label="Monthly Revenue" [value]="'$142k'" delta="+12%" trend="up"></primus-stats-card>

Theme Toggle

<primus-theme-toggle></primus-theme-toggle>

Stepper

<primus-stepper
  [steps]="steps"
  [activeStep]="1"
  [completedSteps]="[0]"
  (stepSelected)="onStepSelected($event)"
></primus-stepper>

Wizard

<primus-wizard title="Leave Request" subtitle="Step 1 of 3">
  <div wizard-steps>
    <primus-stepper
      [steps]="steps"
      [activeStep]="1"
      [completedSteps]="[0]"
    ></primus-stepper>
  </div>
  <div wizard-content>
    <!-- step content -->
  </div>
  <div wizard-actions>
    <primus-wizard-nav
      (back)="onBack()"
      (next)="onNext()"
    ></primus-wizard-nav>
  </div>
</primus-wizard>

Wizard Nav

<primus-wizard-nav
  backLabel="Back"
  nextLabel="Next"
  (back)="onBack()"
  (next)="onNext()"
></primus-wizard-nav>

Summary Card

<primus-summary-card title="Total Users" subtitle="Last 30 days">
  <div>24,910</div>
</primus-summary-card>

Section

<primus-section title="Settings">
  Section content here.
</primus-section>

Props reference (all components)

Angular props reference

<primus-account-card>

Inputs

Input	Description
accountName	Account display name.
accountNumber	Masked account number.
balance	Account balance.
currency	Currency code.
status	Status value.

Outputs: none

<primus-account-dashboard>

Inputs

Input	Description
apiUrl	Base API URL for network calls.
title	Primary heading text.

Outputs: none

<primus-agent-directory>

Inputs

Input	Description
agents	Agent list.
title	Primary heading text.

Outputs: none

<primus-ai-copilot>

Inputs

Input	Description
apiUrl	Base API URL for network calls.
endpoint	Override endpoint for requests.
mode	AI mode (complete or code-review).
placeholder	Input placeholder text.
title	Primary heading text.

Outputs

Output	Description
stepSelected	Emits selected step index.
responded	Emits AI response.

<primus-button>

Inputs

Input	Description
disabled	Disable the control.
label	Label text.
size	Size variant.
type	Type or category.
variant	Style variant.

Outputs

Output	Description
clicked	Emits click event.

<primus-checkout-form>

Inputs

Input	Description
amount	Amount value.
apiUrl	Base API URL for network calls.
currency	Currency code.
endpoint	Override endpoint for requests.

Outputs

Output	Description
failed	Emits operation error.
onError	Emits error string.
onSuccess	Emits success response.
sessionCreated	Emits payment response.
submitted	Emits form payload.

<primus-claim-status-tracker>

Inputs

Input	Description
claimId	Claim identifier.
status	Status value.
steps	Step definitions.

Outputs: none

<primus-claim-tracker>

Inputs

Input	Description
claimId	Claim identifier.
status	Status value.
steps	Step definitions.

Outputs: none

<primus-credit-card>

Inputs

Input	Description
brand	Brand name.
cardHolder	Cardholder name.
expiry	Expiry date.
last4	Last four digits.
variant	Style variant.

Outputs: none

<primus-credit-score-card>

Inputs

Input	Description
apiUrl	Base API URL for network calls.
userId	User identifier.

Outputs: none

<primus-dashboard>

Inputs

Input	Description
title	Primary heading text.
subtitle	Secondary heading text.
stats	Dashboard stats data.
layout	Layout mode: default, sidebar-content, split, centered, full-width.
showHeader	Toggle header block.
showFooter	Toggle footer block.
stickyHeader	Sticky header.
stickyFooter	Sticky footer.
sidebarPosition	Sidebar position.
sidebarWidth	Sidebar width in px.
fullHeight	Stretch to full height.
maxWidth	Max width for centered layout.
padding	Inner padding in px.
headerHeight	Minimum header height.

Outputs: none

<primus-dashboard-grid>

Inputs

Input	Description
columns	Column count.
gap	Grid gap.
responsive	Enable responsive breakpoints.
breakpoints	Override responsive columns at breakpoints.

Outputs: none

<primus-data-table>

Inputs

Input	Description
actions	Action renderer (string output).
columns	Column configuration.
data	Data payload.
emptyMessage	Empty state text.
loading	Loading state.
paginated	Enable client-side pagination.
pageSize	Page size when paginated.
pageIndex	Current page index.
rowKey	Unique key field for rows.
searchPlaceholder	Search input placeholder.
searchable	Enable search box.
selectable	Enable row selection.
selectedKeys	Selected row keys.

Outputs

Output	Description
onRowClick	Emits row data on click.
onSelectionChange	Emits selected keys.
onPageChange	Emits page changes.
rowClick	Emits row data on click.
pageChange	Emits page changes.
selectionChange	Emits selected keys.

<primus-activity-feed>

Inputs

Input	Description
items	Activity items.
maxItems	Maximum items to display.
showTimestamps	Toggle timestamp labels.
groupByDate	Group by date.
loading	Loading state.

Outputs: none

<primus-filter-bar>

Inputs

Input	Description
filters	Filter configuration list.
activeFilters	Current filter values.

Outputs

Output	Description
filterChange	Emits updated filters.

<primus-export-menu>

Inputs

Input	Description
formats	Export format list.
includeCharts	Include charts toggle.
includeStats	Include stats toggle.
includeTables	Include tables toggle.

Outputs

Output	Description
export	Emits export payload.

<primus-search>

Inputs

Input	Description
placeholder	Placeholder text.
debounce	Debounce delay in ms.
value	Controlled value.
showSuggestions	Toggle suggestions list.
suggestions	Suggestion list.

Outputs

Output	Description
search	Emits search query.

<primus-date-range-picker>

Inputs

Input	Description
startDate	Start date value.
endDate	End date value.
ranges	Preset ranges.
min	Minimum date.
max	Maximum date.
disabled	Disable inputs.

Outputs

Output	Description
rangeChange	Emits range changes.

<primus-line-chart> / <primus-area-chart> / <primus-bar-chart> / <primus-pie-chart> / <primus-sparkline>

Inputs

Input	Description
labels	X-axis labels.
series	Series list.
data	Chart.js data object override.
options	Chart.js options override.
height	Chart height in px.
width	Chart width in px.
legend	Toggle legend.
responsive	Responsive sizing.
maintainAspectRatio	Keep aspect ratio.
ariaLabel	Accessible label.

Outputs: none

<primus-date-picker>

Inputs

Input	Description
disabled	Disable the control.
error	Error message.
hint	Helper hint text.
id	Form control id.
label	Label text.
max	Maximum value.
min	Minimum value.
name	Form field name.
placeholder	Input placeholder text.
required	Mark field required.
value	Selected value (single date only).

Outputs

Output	Description
valueChange	Emits when value changes.

<primus-document-viewer>

Inputs

Input	Description
autoRender	Auto-render on init.
data	Data payload.
document	Document payload to preview.
format	Render format ("html" or "pdf").
pdfEndpoint	Endpoint for PDF render.
renderEndpoint	Endpoint for HTML render.
templateId	Document template identifier.
title	Primary heading text.

Outputs

Output	Description
onClose	Emits when closed.
onDownload	Emits when download requested.
renderFailed	Emits render error.
rendered	Emits render response.

<primus-feature-flag-toggle>

Inputs

Input	Description
apiUrl	Base API URL for network calls.
autoLoad	Auto-load on init.
enabled	Custom property.
flagKey	Custom property.
label	Label text.

Outputs

Output	Description
toggleFailed	Emits toggle error.
toggled	Emits flag state.

<primus-file-uploader>

Inputs

Input	Description
accept	Custom property.
apiUrl	Base API URL for network calls.
endpoint	Override endpoint for requests.
inputId	Custom property.
multiple	Custom property.
title	Primary heading text.

Outputs

Output	Description
failed	Emits operation error.
onUploadComplete	Emits upload response.
uploaded	Emits upload response.

<primus-form-field>

Inputs

Input	Description
error	Error message.
forId	Label "for" id.
hint	Helper hint text.
label	Label text.
required	Mark field required.

Outputs: none

<primus-fraud-detection-dashboard>

Inputs

Input	Description
alerts	Alert list.
riskScore	Risk score value.
title	Primary heading text.

Outputs: none

<primus-header>

Inputs

Input	Description
breadcrumbs	Breadcrumb items.
title	Primary heading text.
user	User info.

Outputs

Output	Description
onUserClick	Custom property.

<primus-input>

Inputs

Input	Description
disabled	Disable the control.
error	Error message.
hint	Helper hint text.
id	Form control id.
label	Label text.
name	Form field name.
placeholder	Input placeholder text.
required	Mark field required.
type	Type or category.
value	Display value.

Outputs

Output	Description
valueChange	Emits when value changes.

<primus-kyc-verification>

Inputs

Input	Description
apiUrl	Base API URL for network calls.
userId	User identifier.

Outputs: none

<primus-layout>

Inputs

Input	Description
darkMode	Enable dark mode (optional; follows PrimusThemeService when unset).
header	Header content or toggle.
sidebar	Sidebar content or toggle.

Outputs: none

<primus-loan-calculator>

Inputs

Input	Description
apiUrl	Base API URL for network calls.

Outputs: none

<primus-log-viewer>

Inputs

Input	Description
autoLoad	Auto-load on init.
endpoint	Override endpoint for requests.
entries	Log entries array.
query	Log query string.
title	Primary heading text.

Outputs

Output	Description
loadFailed	Custom property.
loaded	Custom property.

<primus-login>

Inputs

Input	Description
authEndpoint	Auth base endpoint.
endpoint	Override endpoint for requests.
logo	Logo URL.
showEmailLogin	Show email/password form.
socialProviders	Enabled social providers.
subtitle	Secondary heading text.
theme	Theme override.
title	Primary heading text.
useService	Use SDK service for API calls.

Outputs

Output	Description
loggedIn	Emits auth response.
login	Emits login payload.
loginFailed	Emits login error.
onLogin	Emits login payload.
onSocialLogin	Emits provider selection.

<primus-modal>

Inputs

Input	Description
ariaLabel	Custom property.
open	Open state.
size	Size variant.
title	Primary heading text.

Outputs

Output	Description
closed	Emits when closed.
onClose	Emits when closed.

<primus-notification-center>

Inputs

Input	Description
apiUrl	Base API URL for network calls.
pollInterval	Polling interval in ms.
theme	Theme override.
mockData	Mock notification list.
useMock	Toggle mock mode.

Outputs: none

<primus-notification-feed>

Inputs

Input	Description
apiUrl	Base API URL for network calls.
pollInterval	Polling interval in ms.
userId	User identifier.

Outputs: none

<primus-rbac-admin>

Inputs

Input	Description
apiUrl	Base API URL (origin only).
title	Primary heading text.
subtitle	Secondary heading text.
defaultScope	Pre-fill scope fields (applicationId, tenantId, environment).
defaultPrincipalType	Default principal type (e.g., user).
defaultGroupType	Default group type (e.g., team).
showScopeFields	Toggle scope inputs.
withCredentials	Include cookies + CSRF header for BFF auth.
showHero	Show the left hero panel (default: true).
heroBadge	Hero badge label.
heroTitle	Hero headline text.
heroSubtitle	Hero supporting text.
heroItems	Hero bullet list items.

Outputs: none

<primus-policy-card>

Inputs

Input	Description
coverage	Coverage value.
holder	Policy holder name.
policyNumber	Policy number.
premium	Premium amount.
status	Status value.

Outputs: none

<primus-premium-calculator>

Inputs

Input	Description
title	Primary heading text.

Outputs: none

<primus-quote-comparison>

Inputs

Input	Description
quotes	Quote list.
title	Primary heading text.

Outputs: none

<primus-radio-group>

Inputs

Input	Description
disabled	Disable the control.
error	Error message.
hint	Helper hint text.
inline	Inline layout.
label	Label text.
name	Form field name.
options	Options list.
required	Mark field required.
value	Display value.

Outputs

Output	Description
valueChange	Emits when value changes.

<primus-section>

Inputs

Input	Description
subtitle	Secondary heading text.
title	Primary heading text.

Outputs: none

<primus-security-dashboard>

Inputs

Input	Description
apiUrl	Base API URL for network calls.
autoLoad	Auto-load on init.
listEndpoint	Endpoint override for list fetching.
scans	Custom property.
title	Primary heading text.
vulnerabilities	Custom property.

Outputs: none

<primus-security-scan-panel>

Inputs

Input	Description
autoLoad	Auto-load on init.
listEndpoint	Endpoint override for list fetching.
scanEndpoint	Endpoint override for scan action.
scans	Custom property.
target	Custom property.
title	Primary heading text.

Outputs

Output	Description
scanCompleted	Emits scan result.
scanFailed	Emits scan error.

<primus-select>

Inputs

Input	Description
allowEmpty	Allow empty selection.
disabled	Disable the control.
error	Error message.
hint	Helper hint text.
id	Form control id.
label	Label text.
name	Form field name.
options	Options list.
placeholder	Input placeholder text.
required	Mark field required.
value	Display value.
valueType	Coerce emitted values (auto, string, number).

Outputs

Output	Description
valueChange	Emits when value changes.
valueChangeString	Emits string-coerced changes.
valueChangeNumber	Emits number-coerced changes.

<primus-sidebar>

Inputs

Input	Description
activeId	Active navigation id.
items	Navigation items (supports href, route, queryParams).
title	Primary heading text.

Outputs

Output	Description
onItemClick	Custom property.

<primus-stats-card>

Inputs

Input	Description
change	Change indicator object.
delta	Delta text for stats.
description	Short descriptive text.
helper	Helper text below value.
label	Label text.
title	Primary heading text.
trend	Trend direction.
trendData	Trend chart data points.
value	Display value.

Outputs: none

<primus-step>

Inputs

Input	Description
description	Short descriptive text.
label	Label text.
state	Custom property.

Outputs: none

<primus-stepper>

Inputs

Input	Description
activeStep	Active step index.
clickable	Allow step clicks.
completedSteps	Completed step indices.
disabledSteps	Disabled step indices.
errorSteps	Error step indices.
linear	Linear progression mode.
orientation	Orientation (horizontal/vertical).
steps	Step definitions.

Outputs

Output	Description
stepSelected	Custom property.

<primus-summary-card>

Inputs

Input	Description
actionLabel	Action button label.
subtitle	Secondary heading text.
title	Primary heading text.

Outputs

Output	Description
action	Emits when the action button is clicked.

<primus-textarea>

Inputs

Input	Description
disabled	Disable the control.
error	Error message.
hint	Helper hint text.
id	Form control id.
label	Label text.
maxLength	Maximum length.
name	Form field name.
placeholder	Input placeholder text.
required	Mark field required.
rows	Textarea rows.
value	Display value.

Outputs

Output	Description
back	Emits when back is clicked.
next	Emits when next is clicked.
valueChange	Emits when value changes.

<primus-theme-toggle>

Inputs

Input	Description
theme	Optional controlled theme (light or dark).

Outputs

Output	Description
themeChange	Emits theme changes.
toggled	Emits after toggle.

<primus-toggle>

Inputs

Input	Description
checked	Checked state.
description	Short descriptive text.
disabled	Disable the control.
error	Error message.
hint	Helper hint text.
label	Label text.

Outputs

Output	Description
checkedChange	Emits when checked changes.

<primus-transaction-history>

Inputs

Input	Description
transactions	Transaction list.

Outputs

Output	Description
onTransactionClick	Emits selected transaction id.
transactionClick	Emits selected transaction id.

<primus-user-profile>

Inputs

Input	Description
logoutEndpoint	Logout endpoint override.
showLogout	Custom property.
useService	Use SDK service for API calls.
user	User info.

Outputs

Output	Description
loggedOut	Emits after logout.

<primus-wizard>

Inputs

Input	Description
subtitle	Secondary heading text.
title	Primary heading text.

Outputs: none

<primus-wizard-nav>

Inputs

Input	Description
align	Alignment.
backDisabled	Disable back button.
backLabel	Back button label.
backVariant	Back button variant.
nextDisabled	Disable next button.
nextLabel	Next button label.
nextVariant	Next button variant.
showBack	Show back button.
showNext	Show next button.

Outputs

Output	Description
back	Custom property.
next	Custom property.

Primus SaaS UI Components

@primus/ui-core is the zero-dependency base layer that powers all component styling. It provides design tokens, semantic HTML element styles, and Web Components (<primus-tabs>, <primus-dropdown>, toast API) that work in React, Angular, and plain HTML.

Add it once and all your HTML elements inherit the Primus purple brand palette automatically:

npm install @primus/ui-core

Full reference →