Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
68
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Purchase

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.