Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Image Designer
Kanban Board
PDF Viewer
Video Player
Visual Builder
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Buy License

Incidents

Incidents shows an application-level service incident or operational notice. It displays a compact ngs-incidents-bar with a title and optional description, then expands into a ngs-incidents-list with one or more ngs-incident updates.

Use it for service outages, degraded service, maintenance, global system status, and important operational updates that users should see across the app or portal. Build it manually with the Incidents components or show it dynamically with IncidentsStore and ngs-incidents-global.

Do not use Incidents for a local inline message, a user action requirement, a toast, a table row status, an empty state, or a full incident management/history page. Use Alert, ActionRequired, notification components, Badge, Status, EmptyState, Table, or DataView for those cases.

Key features:
  • Application-level incident bar with title and description.
  • Expandable list of incident updates with titles and details.
  • Optional icon, action, and close slots for each incident.
  • Store-driven global usage through IncidentsStore and ngs-incidents-global.

The NgStarter Angular Incidents component lets you show an application-level service incident or operational notice with a compact bar and expandable incident updates. Use for service outages, degraded service, maintenance windows, global system status, and important operational notices that users should see across the app or portal. It includes examples for Basic Incidents, Show/Hide Dynamicly, and Incidents show hide dynamicly.

Basic Incidents

Compose an incident bar and expandable list when the screen needs to show a service incident or maintenance notice.

Maintenance work on the DNSDescription
Maintenance work on the DNS API1 minute ago
Maintenance work on the DNS API2 days ago

Show/Hide Dynamicly

Use IncidentsStore with ngs-incidents-global to show application-wide incidents from code.