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

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.

The NgStarter Angular Announcement component lets you show prominent product, system, or marketing announcements with optional title, icon, and actions. Use for broadcast-style messages that should stand apart from normal form or page content. It includes examples for Show/Hide announcement dynamically, Basic announcement, Announcement with title, and Announcement with icons.

Show/Hide announcement dynamically

Use the announcement store with a global announcement in the layout header when the app needs to show or hide an important message.

Basic announcement

Use a basic announcement for a short global message that should be visible near the top of the application.

You still have not uploaded your Mart invoice due on 22 April 2024
You still have not uploaded your Mart invoice due on 22 April 2024
You still have not uploaded your Mart invoice due on 22 April 2024
You still have not uploaded your Mart invoice due on 22 April 2024
You still have not uploaded your Mart invoice due on 22 April 2024

Announcement with title

Add a title when the header announcement needs a short label before the message.

Neutral
You still have not uploaded your Mart invoice due on 22 April 2024
Informative
You still have not uploaded your Mart invoice due on 22 April 2024
Negative
You still have not uploaded your Mart invoice due on 22 April 2024
Positive
You still have not uploaded your Mart invoice due on 22 April 2024
Warning
You still have not uploaded your Mart invoice due on 22 April 2024

Announcement with icons

Add an icon when the global message needs a quick visual cue for information, warning, success, or error.

You still have not uploaded your Mart invoice due on 22 April 2025
You still have not uploaded your Mart invoice due on 22 April 2024
You still have not uploaded your Mart invoice due on 22 April 2025
You still have not uploaded your Mart invoice due on 22 April 2024
You still have not uploaded your Mart invoice due on 22 April 2025