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

Announcement

The Announcement component shows an important global message in the application layout, most often in the header area. Use it when users need to see a visible app-wide notice without blocking their current work.

Use it for:
  • Global notices: Show a message that should be visible across the app or current layout.
  • Header messages: Place billing, maintenance, deadline, onboarding, or product update notices near the top of the UI.
  • Optional actions: Add an icon, title, link, variant, or close button when the message needs more context.
  • Dynamic announcements: Use the announcement store and global announcement component for app-level messages.

Do not use Announcement for field-level validation, local inline feedback, toast messages, modal confirmations, or critical required actions. Use Alert, Snack Bar, Dialog, or Action Required for those cases.

PropTypeDefault
title
Title of an announcement
string
variant
Colored variant of an announcement
AnnouncementVariant | stringneutral
iconName
Name of an icon
string
closable
Whether the announcement can be closed
booleanfalse
linkTo
Object with link text and URL
AnnouncementLinkTonull
EventDescription
closedExecuted when the close button is clicked