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.

The NgStarter Angular Events components let you build grouped schedule lists with day markers, event cards, inline statuses, time ranges, status tones, and attendee actions. Use ngs-events-list with ngs-events-section and ngs-event for calendars, meeting lists, agenda panels, reminders, release schedules, and weekly planning surfaces.

Basic Events

Use a basic events list when users need to scan upcoming appointments grouped by day.

This week

19Thu
Octolane Check-in
Confirmed9:00 - 9:30 AM
AMDK
20Fri
POC Progress
Draft9:00 - 9:15 AM
AMPO
21Sat
Octolane Weekly Review
9:00 - 10:00 AM
AMMR

Weekly Grouping

Group events by app-defined weeks when users need a short agenda rather than a full calendar grid.

This week

21Sat
Octolane Weekly Review
Confirmed9:00 - 10:00 AM
AMMR

Next week

23Mon
POC Progress
Draft9:00 - 9:15 AM
AMPO