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

Events

The Events components show upcoming meetings, appointments, releases, and reminders in a grouped list. Use ngs-events-list for the full schedule, ngs-events-section for day or week groups, and ngs-event for each dated row.

Use it for:
  • Schedule lists: Show events by Tomorrow, This week, Next week, or any app-defined period.
  • Calendar-adjacent cards: Pair a compact date tile with title, time, attendees, and actions.
  • Status hints: Use the status tone to show active, tentative, blocked, or neutral events.
  • Inline status: Place an event status directly before the time when the schedule line needs confirmation state.

ngs-events-list

PropTypeDefault
groupBy
Semantic grouping mode for the list.
'none' | 'day' | 'week''day'

ngs-events-section

PropTypeDefault
label
Visible section heading, such as Tomorrow, This week, or Next week.
string''

ngs-event-date

PropTypeDefault
weekday
Short weekday label displayed in the date tile.
string''
day
Day number displayed in the date tile.
string | number''

ngs-event-status

PropTypeDefault
tone
Status color intent displayed before the event time.
'default' | 'primary' | 'success' | 'warning' | 'danger' | 'neutral''default'

Slots

SlotDescription
ngs-event-titlePrimary event title slot.
ngs-event-statusOptional status displayed to the left of the event time.
ngs-event-timeTime range or secondary schedule line.
ngs-event-descriptionOptional supporting copy for descriptive event rows.
ngsEventActionsProjected trailing action or attendee area.