Syncfusion Angular Notifications

Implementing Syncfusion Angular Notifications

---

Message

The Syncfusion Angular Message component (ejs-message) displays contextual messages with severity-based icons and colors to communicate importance to the user. It supports multiple severity types, visual variants, close icon, custom templates, content alignment, CSS customization, and full accessibility compliance.

Package: @syncfusion/ej2-angular-notifications Module: MessageModule Selector: ejs-message

---

📋 All files linked under references/ are read-only documentation and comply with the same security policy as this skill.

Navigation Guide

Getting Started

📄 Read: references/message-getting-started.md

• Installing @syncfusion/ej2-angular-notifications via ng add
• CSS/SCSS theme imports (Material3)
• MessageModule import in standalone component
• Minimal ejs-message template setup
• Running the application

Severity Types

📄 Read: references/message-severities.md

• severity property with all five values: Normal, Success, Info, Warning, Error
• Default severity (Normal)
• When to choose each severity type
• Code example with all severities

Visual Variants

📄 Read: references/message-variants.md

• variant property: Text, Outlined, Filled
• Default variant (Text)
• Combining variant with severity
• Full example showing all combinations

Icons and Close Icon

📄 Read: references/message-icons.md

• showIcon — hide/show the severity icon
• showCloseIcon — add a close icon to dismiss messages
• (closed) event — react when user closes a message
• Restoring visibility with visible property
• Custom icon using cssClass

Customization and Templates

📄 Read: references/message-customization.md

• Content alignment: left (default), center (e-content-center), right (e-content-right)
• Rounded and square border styles via cssClass
• CSS-only message rendering (no script reference)
• Predefined CSS classes for manual DOM structure
• Rich HTML template via <ng-template #content>

Accessibility

📄 Read: references/message-accessibility.md

• WCAG 2.2 / Section 508 compliance
• WAI-ARIA attributes (role=alert, aria-label)
• Keyboard interaction (Tab, Enter/Space for close icon)
• RTL support via enableRtl
• Screen reader behavior

API Reference

📄 Read: references/message-api.md

• All properties: content, cssClass, enablePersistence, enableRtl, locale, severity, showCloseIcon, showIcon, variant, visible
• Methods: destroy(), getPersistData()
• Events: closed, created, destroyed

---

Quick Start

ng add @syncfusion/ej2-angular-notifications

/* styles.css – added automatically by ng add */
/* NOTE: These are consumer-side stylesheet references only; no packages are installed or executed by this skill. */
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-angular-notifications/styles/message/material3.css';

import { MessageModule } from '@syncfusion/ej2-angular-notifications';
import { Component } from '@angular/core';

@Component({
  imports: [MessageModule],
  standalone: true,
  selector: 'app-root',
  template: '<ejs-message content="Please read the comments carefully"></ejs-message>'
})
export class AppComponent { }

---

Common Patterns

Message with Severity

import { MessageModule } from '@syncfusion/ej2-angular-notifications';
import { Component } from '@angular/core';

@Component({
  imports: [MessageModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-message content="Editing is restricted"></ejs-message>
    <ejs-message content="Please read the comments carefully" severity="Info"></ejs-message>
    <ejs-message content="Your message has been sent successfully" severity="Success"></ejs-message>
    <ejs-message content="There was a problem with your network connection" severity="Warning"></ejs-message>
    <ejs-message content="A problem occurred while submitting your data" severity="Error"></ejs-message>
  `
})
export class AppComponent { }

Dismissable Message with Close Icon

import { MessageModule } from '@syncfusion/ej2-angular-notifications';
import { Component, ViewChild } from '@angular/core';
import { MessageComponent } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [MessageModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-message #msg severity="Warning" [showCloseIcon]="true" (closed)="onClosed()">
      There was a problem with your network connection
    </ejs-message>
    <button *ngIf="isClosed" (click)="reopen()">Show again</button>
  `
})
export class AppComponent {
  @ViewChild('msg') msg!: MessageComponent;
  isClosed = false;

  onClosed(): void {
    this.isClosed = true;
  }

  reopen(): void {
    this.msg.visible = true;
    this.isClosed = false;
  }
}

Filled Variant with Severity

import { MessageModule } from '@syncfusion/ej2-angular-notifications';
import { Component } from '@angular/core';

@Component({
  imports: [MessageModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-message content="Your message has been sent successfully"
      severity="Success" variant="Filled">
    </ejs-message>
  `
})
export class AppComponent { }

---

Key Props at a Glance

---

Skeleton

The Skeleton component provides a visual placeholder for content that is loading or yet to be rendered. It helps improve perceived performance by showing users what content is coming, reducing cognitive load during loading states.

Package: @syncfusion/ej2-angular-notifications Module: SkeletonModule Selector: ejs-skeleton

📋 All files linked under references/ are read-only documentation and comply with the same security policy as this skill.

Navigation Guide

Getting Started

📄 Read: references/skeleton-getting-started.md

• Installation and package setup
• Dependencies and CSS imports
• Basic skeleton implementation
• Angular 19+ standalone architecture
• Running your application with Skeleton

Shapes and Layout Design

📄 Read: references/skeleton-shapes.md

• Circle shapes for avatars and profile pictures
• Square shapes for thumbnails and icons
• Rectangle shapes for images and cards
• Text shapes for paragraphs and content
• Combining shapes to build complete layouts
• Responsive sizing and responsive design

Shimmer Effects and Animation

📄 Read: references/skeleton-shimmer-effects.md

• Wave effect (default animation)
• Pulse effect (fade in/out animation)
• Fade effect (opacity change animation)
• Changing effects dynamically
• Performance considerations for multiple skeletons

Styling and Customization

📄 Read: references/skeleton-styles-customization.md

• Using cssClass for custom styling
• Customizing wave/background colors
• Setting width and height dimensions
• Controlling visibility with the visible property
• CSS variables for theming
• Theme Studio integration

Accessibility Features

📄 Read: references/skeleton-accessibility.md

• WCAG 2.2 and Section 508 compliance
• Screen reader support and live regions
• WAI-ARIA attributes (role, aria-label, aria-live, aria-busy)
• Right-to-Left (RTL) support
• Keyboard navigation and focus management
• Color contrast requirements
• Accessibility validation tools

API Reference

📄 Read: references/skeleton-api.md

• All properties with descriptions and defaults
• Methods and lifecycle management
• Event handling patterns
• Type definitions (SkeletonType, ShimmerEffect)
• Property usage examples
• Complete API documentation

---

Quick Start

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div>
      <h2>Loading User Profile...</h2>
      <!-- Avatar skeleton -->
      <ejs-skeleton shape="Circle" width="60px"></ejs-skeleton>
      
      <!-- Name and description skeletons -->
      <ejs-skeleton width="30%" height="15px"></ejs-skeleton>
      <ejs-skeleton width="50%" height="15px"></ejs-skeleton>
      
      <!-- Content skeleton -->
      <ejs-skeleton shape="Rectangle" width="100%" height="150px"></ejs-skeleton>
    </div>
  `
})
export class AppComponent {}

---

Common Patterns

Pattern 1: Card Loading Skeleton

Display a skeleton layout matching a card component during data loading:

@Component({
  selector: 'app-card-skeleton',
  template: `
    <div class='card-skeleton'>
      <!-- Avatar -->
      <div class='avatar-section'>
        <ejs-skeleton shape="Circle" width="50px"></ejs-skeleton>
      </div>
      <!-- Content -->
      <div class='content-section'>
        <ejs-skeleton width="60%" height="12px"></ejs-skeleton>
        <ejs-skeleton width="40%" height="12px"></ejs-skeleton>
        <ejs-skeleton width="100%" height="80px"></ejs-skeleton>
      </div>
      <!-- Actions -->
      <div class='action-section'>
        <ejs-skeleton shape="Rectangle" width="30%" height="36px"></ejs-skeleton>
      </div>
    </div>
  `
})
export class CardSkeletonComponent {}

Pattern 2: List Loading with Pulse Effect

Show multiple skeleton rows with a pulsing shimmer effect:

@Component({
  selector: 'app-list-skeleton',
  template: `
    <div class='list-skeleton'>
      <div class='list-item' *ngFor="let item of [1,2,3,4,5]">
        <ejs-skeleton shape="Circle" width="40px" shimmerEffect="Pulse"></ejs-skeleton>
        <div class='item-content'>
          <ejs-skeleton width="50%" height="14px" shimmerEffect="Pulse"></ejs-skeleton>
          <ejs-skeleton width="30%" height="12px" shimmerEffect="Pulse"></ejs-skeleton>
        </div>
      </div>
    </div>
  `
})
export class ListSkeletonComponent {}

Pattern 3: Conditional Skeleton Rendering

Show skeleton while loading, hide when content is ready:

@Component({
  selector: 'app-conditional-skeleton',
  template: `
    <!-- Show skeleton while loading -->
    <div *ngIf="isLoading">
      <ejs-skeleton shape="Rectangle" width="100%" height="200px" 
                    shimmerEffect="Wave"></ejs-skeleton>
    </div>
    <!-- Show content when loaded -->
    <div *ngIf="!isLoading">
      <img [src]="imageUrl" alt="Loaded content">
    </div>
  `
})
export class ConditionalSkeletonComponent {
  isLoading = true;
  imageUrl = '';
  
  ngOnInit() {
    // Simulate loading
    setTimeout(() => {
      this.isLoading = false;
      this.imageUrl = 'assets/image.jpg';
    }, 2000);
  }
}

---

Key Properties

Common Use Cases

1. Data Grid Loading: Show skeleton rows while grid data is loading from server 2. Image Gallery: Display placeholder rectangles while images download 3. Feed/Timeline: Show multiple skeleton cards while loading feed items 4. Profile Page: Combine shapes to preview profile layout 5. List with Avatars: Use Circle + Text shapes for user lists 6. Modal Content: Display skeleton inside dialogs during async operations 7. Product Cards: Build skeleton matching product card layout 8. Dashboard: Create skeleton layouts for dashboard widgets

Toast

The Syncfusion Angular Toast (ejs-toast) is a non-blocking notification component that displays brief messages at a defined position on the screen. Toasts auto-dismiss after a configurable timeout and support rich content via templates, action buttons, icons, and progress bars.

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Prerequisites and dependencies
• Installing @syncfusion/ej2-angular-notifications
• Adding CSS/theme imports
• Basic toast setup (standalone + NgModule)
• Showing a toast on component creation
• Running the application

Configuration

📄 Read: references/configuration.md

• Title and content properties
• Custom target container
• Show/hide close button (showCloseButton)
• Progress bar (showProgressBar, progressDirection)
• Newest on top (newestOnTop)
• Width and height customization
• Icon using icon property
• cssClass for semantic types (e-success, e-info, e-warning, e-danger)
• enableHtmlSanitizer, enableRtl, locale

Position and Animation

📄 Read: references/position-and-animation.md

• Predefined X/Y positions (Left, Center, Right / Top, Bottom)
• Custom pixel/percentage positions
• Multiple toasts in different positions
• Animation configuration (show/hide effects, duration, easing)
• Default animation (FadeIn/FadeOut)

Templates and Action Buttons

📄 Read: references/template-and-buttons.md

• HTML string and element ID templates
• Angular ng-template with #template, #title, #content
• Dynamic templates via show() method arguments
• Action buttons with buttons property and click handlers
• ButtonModelPropsModel configuration

Timeout and Events

📄 Read: references/timeout-and-events.md

• timeOut property (default 5000ms)
• extendedTimeout on hover (default 1000ms)
• Static toast (timeOut: 0)
• All events: created, open, close, click, beforeOpen, beforeClose, beforeSanitizeHtml, destroyed
• Event argument types and cancellation patterns

Toast Utility Service

📄 Read: references/toast-utility.md

• ToastUtility.show() for minimal-code toasts
• Predefined types: Information, Success, Error, Warning
• Full ToastModel argument usage with events and positioning
• When to use utility vs component approach

How-To Guides

📄 Read: references/how-to.md

• Close toast on click/tap
• Prevent duplicate toasts
• Restrict maximum visible toasts
• Add dynamic templates
• Render Angular ng-template in toast
• Show multiple toasts in various positions
• Customize progress bar theme and sizing
• Play audio before toast opens
• Prevent toast close with mobile swipe
• Show different types of toast

API Reference

📄 Read: references/api.md

• All properties with types and defaults
• Methods: show(), hide(), destroy()
• All events with argument type links
• ToastAnimationSettingsModel, ToastPositionModel, ButtonModelPropsModel

---

Quick Start

// app.ts (Angular standalone)
import { Component, ViewChild } from '@angular/core';
import { ToastModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [ToastModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-toast #toast (created)="onCreated()">
      <ng-template #title><div>Notification</div></ng-template>
      <ng-template #content><div>Your action was successful.</div></ng-template>
    </ejs-toast>
    <button (click)="toast.show()">Show Toast</button>
  `
})
export class App {
  @ViewChild('toast') toast: any;
  onCreated() { this.toast.show(); }
}

Install:

ng add @syncfusion/ej2-angular-notifications

CSS (styles.css):

@import '@syncfusion/ej2-base/styles/material3.css';
@import '@syncfusion/ej2-buttons/styles/material3.css';
@import '@syncfusion/ej2-popups/styles/material3.css';
@import '@syncfusion/ej2-angular-notifications/styles/material3.css';

---

Common Patterns

Success/Error/Warning/Info Toast

// Using cssClass for semantic coloring
toastObj.show({ content: 'File saved!', cssClass: 'e-toast-success' });
toastObj.show({ content: 'Upload failed.', cssClass: 'e-toast-danger' });
toastObj.show({ content: 'Low disk space.', cssClass: 'e-toast-warning' });
toastObj.show({ content: 'Update available.', cssClass: 'e-toast-info' });

Quick Toast via ToastUtility

import { ToastUtility } from '@syncfusion/ej2-angular-notifications';
ToastUtility.show('Operation successful', 'Success', 3000);

Toast with Progress Bar + Close Button

<ejs-toast [showProgressBar]="true" [showCloseButton]="true" [timeOut]="4000">
</ejs-toast>

Toast Positioned Bottom-Center

public position = { X: 'Center', Y: 'Bottom' };

<ejs-toast [position]="position"></ejs-toast>

Action Buttons

public buttons = [
  { model: { content: 'Undo' }, click: () => this.onUndo() },
  { model: { content: 'Dismiss' } }
];

Static Toast (no auto-dismiss)

<ejs-toast [timeOut]="0" [showCloseButton]="true"></ejs-toast>

---

Key Properties

---

Common Use Cases

Badge

The Syncfusion Angular Badge is a pure CSS component — no Angular component class to import. Badges are applied by adding CSS modifier classes to a <span> (or <a>) element nested inside the target UI element.

Package: @syncfusion/ej2-angular-notifications

Key Features

• 8 color variants — primary, secondary, success, danger, warning, info, light, dark
• Shape types — circle, pill, link, notification, dot, overlap
• Positioning — top (default) and bottom placement on parent elements
• Customization — custom colors, sizes, and arbitrary positions via CSS
• ListView integration — embed badges in list items with dynamic content

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Package installation and CSS imports
• Adding the first badge to an Angular component
• Minimal working example
• Running the application

Badge Types and Shapes

📄 Read: references/types-and-shapes.md

• 8 predefined color variants and their semantic purpose
• Circle, pill, link, notification, dot, overlap shape types
• Badge positioning (top vs bottom)
• When to combine modifier classes (e.g., overlap + notification + circle)

Customization

📄 Read: references/customization.md

• Custom color overrides with CSS classes
• Adjusting badge size via font-size
• Custom positioning (left-top, left-bottom) with CSS overrides
• When to use custom CSS vs built-in modifier classes

How-To Guides

📄 Read: references/how-to.md

• Integrate badges into a ListView component
• Update badge content dynamically (increment counts)
• Angular pattern for badge state management using DOM updates

Quick Start

1. Install the package:

npm install @syncfusion/ej2-angular-notifications --save

2. Add CSS to `src/styles.css`:

@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css";

3. Add a badge in your component:

<!-- src/app/app.component.html -->
<h1>Badge Component <span class="e-badge e-badge-primary">New</span></h1>

Common Patterns

Notification badge on an icon

<!-- Parent must have position: relative -->
<div class="badge-block">
  <div class="skype svg_icons"></div>
  <span class="e-badge e-badge-success e-badge-overlap e-badge-notification">99+</span>
</div>

Dot status indicator (bottom position)

<div class="badge-block">
  <div class="firefox svg_icons"></div>
  <span class="e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom"></span>
</div>

Pill-shaped label

<h1>Messages <span class="e-badge e-badge-primary e-badge-pill">New</span></h1>

CSS Class Reference

Badge Customization

Table of Contents

• Color Customization
• Size Customization
• Custom Positioning

---

Color Customization

The Badge provides eight built-in color variants. When those don't match your design requirements, apply a custom CSS class to override the badge's background and text colors.

The pattern is to keep a built-in color class for the base styles and add your own class to override color properties:

<div>
    <h1>Color Customization <span class="e-badge e-badge-primary e-badge-pill green">New</span></h1>
    <h1>Color Customization <span class="e-badge e-badge-primary e-badge-pill bue">New</span></h1>
    <h1>Color Customization <span class="e-badge e-badge-primary e-badge-pill purple">New</span></h1>
    <h1>Color Customization <span class="e-badge e-badge-primary e-badge-pill gradient">New</span></h1>
</div>

Define the custom classes in your CSS file:

/* Example custom color overrides */
.e-badge.green {
  background-color: #4CAF50;
  color: #fff;
}

.e-badge.purple {
  background-color: #9C27B0;
  color: #fff;
}

.e-badge.gradient {
  background: linear-gradient(45deg, #f06, #48f);
  color: #fff;
}

Use specific selectors (e.g., .e-badge.green) to avoid conflicts with other elements.

---

Size Customization

The Badge automatically scales with its text content. To explicitly control the badge size, change the font-size CSS property — the badge dimensions respond proportionally.

<div>
    <h1>Badge Component <span class="e-badge e-badge-primary size_1">New</span></h1>
    <h1>Badge Component <span class="e-badge e-badge-primary size_2">New</span></h1>
    <h1>Badge Component <span class="e-badge e-badge-primary size_3">New</span></h1>
</div>

Define size classes in your CSS:

.e-badge.size_1 {
  font-size: 10px;
}

.e-badge.size_2 {
  font-size: 14px;
}

.e-badge.size_3 {
  font-size: 18px;
}

Changing font-size is the recommended way to resize badges — the padding, border-radius, and line-height all scale relative to the font size.

---

Custom Positioning

The built-in .e-badge-bottom class only supports top and bottom placement. For left-side or other arbitrary positions, apply a custom CSS class that overrides the badge's top, right, bottom, and left properties.

<div>
    <div class="block">
        <!-- Left-top custom position -->
        <div class="badge-block">
            <div class="firefox svg_icons"></div>
            <span class="e-badge e-badge-warning e-badge-notification e-badge-overlap leftTop">99+</span>
        </div>
        <div class="badge-block">
            <div class="facebook svg_icons"></div>
            <span class="e-badge e-badge-danger e-badge-notification e-badge-overlap leftTop">99+</span>
        </div>
        <div class="badge-block">
            <div class="skype svg_icons"></div>
            <span class="e-badge e-badge-secondary e-badge-notification e-badge-overlap leftTop">18</span>
        </div>
    </div>
    <div class="badge-block">
        <!-- Left-bottom custom position -->
        <div class="badge-block">
            <div class="firefox svg_icons"></div>
            <span class="e-badge e-badge-warning e-badge-notification e-badge-overlap leftBottom">99+</span>
        </div>
        <div class="badge-block">
            <div class="facebook svg_icons"></div>
            <span class="e-badge e-badge-danger e-badge-notification e-badge-overlap leftBottom">99+</span>
        </div>
        <div class="badge-block">
            <div class="skype svg_icons"></div>
            <span class="e-badge e-badge-secondary e-badge-notification e-badge-overlap leftBottom">18</span>
        </div>
    </div>
</div>

Define the custom position classes in CSS:

/* Left-top position */
.e-badge.leftTop {
  right: auto;
  left: -10px;
  top: -10px;
}

/* Left-bottom position */
.e-badge.leftBottom {
  right: auto;
  left: -10px;
  top: auto;
  bottom: -10px;
}

Always keep .e-badge-overlap when using custom positions — it sets the position: absolute needed for CSS coordinate overrides to work.

Getting Started with Angular Badge

The Syncfusion Angular Badge is a pure CSS component. There is no Angular component class — badges are rendered as plain HTML elements styled with CSS modifier classes.

Installation

Install the notifications package which bundles the Badge component:

npm install @syncfusion/ej2-angular-notifications --save

The --save flag records the package in the dependencies section of package.json.

Setting Up an Angular Project

Create a new Angular project (recommended):

ng new syncfusion-angular-app
cd syncfusion-angular-app
ng serve

Adding CSS References

Add the following imports to src/styles.css:

@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css";

The styles in src/styles.css are included automatically by Angular.

Adding Your First Badge

Badges attach to any inline element — typically a <span> nested inside a heading, button, or container. The only requirement is the base e-badge class plus a color variant class:

<!-- src/app/app.component.html -->
<h1>Badge Component <span class="e-badge e-badge-primary">New</span></h1>

Running the Application

ng serve

The browser opens with your badge rendered inline inside the heading.

Key Points

• No component import needed — Badge is CSS-only; just add classes to a <span> or <a>.
• Always include `e-badge` as the base class alongside any modifier class.
• Parent positioning — For notification/dot/overlap badges, the parent container should have position: relative so the badge positions correctly.

How-To Guides

Table of Contents

• Integrate Badge into ListView
• Dynamic Badge Content

---

Integrate Badge into ListView

Badges can be embedded directly in ListViewComponent item templates to display notification counts or status alongside list entries. The badge automatically scales to match the list item height — no manual size configuration is needed.

When to use: Email inboxes, notification panels, sidebar navigation with unread counts.

// src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public dataSource: { [key: string]: any }[] = [
    { id: 'p_01', text: 'Primary', messages: '3 New', badge: 'e-badge e-badge-primary', icons: 'primary', type: 'Primary' },
    { id: 'p_02', text: 'Social', messages: '27 New', badge: 'e-badge e-badge-secondary', icons: 'social', type: 'Primary' },
    { id: 'p_03', text: 'Promotions', messages: '7 New', badge: 'e-badge e-badge-success', icons: 'promotion', type: 'Primary' },
    { id: 'p_04', text: 'Updates', messages: '13 New', badge: 'e-badge e-badge-info', icons: 'updates', type: 'Primary' },
    { id: 'p_05', text: 'Starred', messages: '', badge: '', icons: 'starred', type: 'All Labels' },
    { id: 'p_06', text: 'Important', messages: '2 New', badge: 'e-badge e-badge-danger', icons: 'important', type: 'All Labels' },
    { id: 'p_07', text: 'Sent', messages: '', badge: '', icons: 'sent', type: 'All Labels' },
    { id: 'p_08', text: 'Outbox', messages: '', badge: '', icons: 'outbox', type: 'All Labels' },
    { id: 'p_09', text: 'Drafts', messages: '7 New', badge: 'e-badge e-badge-warning', icons: 'draft', type: 'All Labels' }
  ];

  public fields: object = { groupBy: 'type' };
}

<!-- src/app/app.component.html -->
<div class="sample_container badge-list">
  <ejs-listview
    id="lists"
    [dataSource]="dataSource"
    [fields]="fields"
    headerTitle="Inbox"
    [showHeader]="true"
  >
    <ng-template #template let-data>
      <div class="listWrapper" style="width: inherit; height: inherit;">
        <span class="{{data.icons}} list_svg">&nbsp;</span>
        <span class="list_text">{{ data.text }}</span>
        <span
          *ngIf="data.badge !== ''"
          [ngClass]="data.badge"
          style="float: right; margin-top: 16px; font-size: 12px;"
        >
          {{ data.messages }}
        </span>
      </div>
    </ng-template>
  </ejs-listview>
</div>

Key points:

• Store badge CSS classes in the data source (badge field) so each item controls its own badge color independently.
• Items without a badge have an empty string for the badge field — the template renders nothing in that case.
• Custom header behavior is optional in Angular and can be handled with component logic if needed.
• Install @syncfusion/ej2-angular-lists for ListViewComponent: npm install @syncfusion/ej2-angular-lists --save

---

Dynamic Badge Content

Many applications need badge counts that update in response to user actions or incoming data. Because Badge is CSS-only, update the badge text content directly via DOM queries rather than through template re-render.

When to use: Inbox counters that increment on new messages, notification panels with live updates.

// src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  public dataSource: { [key: string]: any }[] = [
    { id: 'p_01', text: 'Primary', badge: 'e-badge e-badge-primary', icons: 'primary', type: 'Primary' },
    { id: 'p_02', text: 'Social', badge: 'e-badge e-badge-secondary', icons: 'social', type: 'Primary' },
    { id: 'p_03', text: 'Promotions', badge: 'e-badge e-badge-success', icons: 'promotion', type: 'Primary' },
    { id: 'p_04', text: 'Updates', badge: 'e-badge e-badge-info', icons: 'updates', type: 'Primary' },
    { id: 'p_05', text: 'Starred', badge: '', icons: 'starred', type: 'All Labels' },
    { id: 'p_06', text: 'Important', badge: 'e-badge e-badge-danger', icons: 'important', type: 'All Labels' },
    { id: 'p_07', text: 'Sent', badge: '', icons: 'sent', type: 'All Labels' },
    { id: 'p_08', text: 'Outbox', badge: '', icons: 'outbox', type: 'All Labels' },
    { id: 'p_09', text: 'Drafts', badge: 'e-badge e-badge-warning', icons: 'draft', type: 'All Labels' }
  ];

  public fields: object = { groupBy: 'type' };

  public values: { [key: string]: number } = {
    Primary: 3,
    Social: 27,
    Promotions: 7,
    Updates: 13,
    Drafts: 7,
    Important: 2
  };

  public increment(): void {
    const list = document.getElementById('lists');
    if (!list) {
      return;
    }
    const badgeElements = Array.prototype.slice.call(list.getElementsByClassName('e-badge'));
    badgeElements.forEach((element: HTMLElement) => {
      const count = Number(element.textContent?.split(' ')[0]);
      element.textContent = `${count + 1} New`;
    });
  }
}

<!-- src/app/app.component.html -->
<div class="sample_container badge-list">
  <ejs-listview
    id="lists"
    [dataSource]="dataSource"
    [fields]="fields"
    headerTitle="Inbox"
    [showHeader]="true"
  >
    <ng-template #template let-data>
      <div class="listWrapper" style="width: inherit; height: inherit;">
        <span class="{{data.icons}} list_svg">&nbsp;</span>
        <span class="list_text">{{ data.text }}</span>
        <span
          *ngIf="data.badge !== ''"
          [ngClass]="data.badge"
          style="float: right; margin-top: 16px; font-size: 12px;"
        >
          {{ values[data.text] }} New
        </span>
      </div>
    </ng-template>
  </ejs-listview>
  <p class="crossline"></p>
  <span class="incr_button">
    <button class="e-btn e-primary" (click)="increment()">Increment Badge Count</button>
  </span>
</div>

Key points:

• Badge text follows the pattern "{count} New" — the increment splits on the space and parses the number.
• getElementsByClassName('e-badge') selects all badge elements within the list container by ID (lists).
• The template keeps badge rendering isolated and reusable across list items.
• For real-time updates (WebSockets, polling), call the same DOM-update logic inside your data handler instead of the button increment().

Badge Types and Shapes

Table of Contents

• Color Variants
• Shape Types
• Circle
• Pill
• Link
• Notification
• Dot
• Overlap
• Badge Positioning
• Combining Modifier Classes

---

Color Variants

The Badge component provides eight predefined color variants. Each carries a semantic meaning to communicate intent to users:

<div class="sample_container">
    <div class="block">
        <div class="e-card e-badge-showcase">
            <div class="e-card-content">
                <div><span class="e-badge e-badge-primary">Primary</span></div>
            </div>
            <div class="e-card-content">
                <div><code>.e-badge-primary</code></div>
            </div>
        </div>
    </div>
    <!-- Repeat pattern for secondary, success, danger, warning, info, light, dark -->
</div>

---

Shape Types

Circle

Apply .e-badge-circle to render a circular badge. Typically combined with .e-badge-notification and .e-badge-overlap for icon overlays.

<div>
    <div class="badge-block">
        <div class="skype svg_icons"></div>
        <span class="e-badge e-badge-success e-badge-overlap e-badge-notification e-badge-circle">18</span>
    </div>
    <div class="badge-block">
        <div class="twitter svg_icons"></div>
        <span class="e-badge e-badge-info e-badge-overlap e-badge-notification e-badge-circle">9</span>
    </div>
    <div class="badge-block">
        <div class="facebook svg_icons"></div>
        <span class="e-badge e-badge-info e-badge-overlap e-badge-notification e-badge-circle">2</span>
    </div>
    <div class="badge-block">
        <div class="firefox svg_icons"></div>
        <span class="e-badge e-badge-danger e-badge-overlap e-badge-notification e-badge-circle">35</span>
    </div>
</div>

---

Pill

Apply .e-badge-pill for a rounded-rectangle (pill) shape — ideal for text labels and "New" indicators.

<h1>Badge Component <span class="e-badge e-badge-primary e-badge-pill">New</span></h1>

---

Link

When badge classes are applied to an <a> tag, the badge gains hover state styling automatically.

<div class="badge-block">
    <a href="#" class="e-badge e-badge-primary">Link Badge</a>
</div>

---

Notification

Apply .e-badge-notification to create a counter badge. Use for alert counts and status changes that need immediate attention.

Note: Ensure the parent element has position: relative for correct placement.

<div>
    <div class="badge-block">
        <div class="skype svg_icons"></div>
        <span class="e-badge e-badge-success e-badge-overlap e-badge-notification">99+</span>
    </div>
    <div class="badge-block">
        <div class="twitter svg_icons"></div>
        <span class="e-badge e-badge-info e-badge-overlap e-badge-notification">27</span>
    </div>
    <div class="badge-block">
        <div class="facebook svg_icons"></div>
        <span class="e-badge e-badge-info e-badge-overlap e-badge-notification">2</span>
    </div>
    <div class="badge-block">
        <div class="firefox svg_icons"></div>
        <span class="e-badge e-badge-danger e-badge-overlap e-badge-notification">35</span>
    </div>
</div>

---

Dot

Apply .e-badge-dot to render a small dot with no text content — ideal for presence/availability indicators.

Note: Leave the <span> empty. Set the parent to position: relative.

<div>
    <div class="badge-block">
        <div class="skype svg_icons"></div>
        <span class="e-badge e-badge-success e-badge-overlap e-badge-dot"></span>
    </div>
    <div class="badge-block">
        <div class="twitter svg_icons"></div>
        <span class="e-badge e-badge-info e-badge-overlap e-badge-dot"></span>
    </div>
    <div class="badge-block">
        <div class="facebook svg_icons"></div>
        <span class="e-badge e-badge-info e-badge-overlap e-badge-dot"></span>
    </div>
    <div class="badge-block">
        <div class="firefox svg_icons"></div>
        <span class="e-badge e-badge-danger e-badge-overlap e-badge-dot"></span>
    </div>
</div>

---

Overlap

Apply .e-badge-overlap to make the badge extend beyond the boundary of the parent element. Combine it with .e-badge-notification or .e-badge-dot for icon overlays.

<div>
    <div class="badge-block">
        <div class="skype svg_icons"></div>
        <span class="e-badge e-badge-success e-badge-overlap e-badge-notification">99+</span>
    </div>
    <div class="badge-block">
        <div class="twitter svg_icons"></div>
        <span class="e-badge e-badge-info e-badge-overlap e-badge-notification">27</span>
    </div>
    <div class="badge-block">
        <div class="facebook svg_icons"></div>
        <span class="e-badge e-badge-info e-badge-overlap e-badge-notification">2</span>
    </div>
    <div class="badge-block">
        <div class="firefox svg_icons"></div>
        <span class="e-badge e-badge-danger e-badge-overlap e-badge-notification">35</span>
    </div>
</div>

---

Badge Positioning

Notification and dot badges default to top placement. Add .e-badge-bottom to move the badge to the bottom of the parent.

This is particularly useful for avatar components where bottom placement communicates status more intuitively.

<div>
    <div class="badge-block">
        <div class="firefox svg_icons"></div>
        <!-- Bottom position -->
        <span class="e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom"></span>
    </div>
    <div class="badge-block">
        <div class="skype svg_icons"></div>
        <span class="e-badge e-badge-info e-badge-overlap e-badge-dot e-badge-bottom"></span>
    </div>
    <div class="badge-block">
        <div class="facebook svg_icons"></div>
        <!-- Default top position (no e-badge-bottom) -->
        <span class="e-badge e-badge-info e-badge-overlap e-badge-dot"></span>
    </div>
    <div class="badge-block">
        <div class="twitter svg_icons"></div>
        <span class="e-badge e-badge-danger e-badge-overlap e-badge-dot e-badge-bottom"></span>
    </div>
</div>

---

Combining Modifier Classes

Modifier classes compose freely. The typical pattern for icon notification badges is:

e-badge  +  [color]  +  e-badge-overlap  +  e-badge-notification  +  [optional: e-badge-circle]

Accessibility – Syncfusion Angular Message

Table of Contents

• Compliance Overview
• WAI-ARIA Attributes
• Keyboard Interaction
• RTL Support
• Screen Reader Support
• Testing Accessibility

---

Compliance Overview

The Syncfusion Angular Message component meets all major accessibility standards:

---

WAI-ARIA Attributes

The Message component follows the WAI-ARIA alert pattern:

These attributes are applied automatically — no manual configuration is required.

---

Keyboard Interaction

When showCloseIcon is true, the close icon is keyboard-accessible:

There is no keyboard interaction for messages without a close icon, since they are purely informational.

---

RTL Support

Enable right-to-left layout for languages such as Arabic or Hebrew using the enableRtl property:

import { MessageModule } from '@syncfusion/ej2-angular-notifications';
import { Component } from '@angular/core';

@Component({
  imports: [MessageModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-message content="يرجى قراءة التعليقات بعناية" severity="Info" [enableRtl]="true"></ejs-message>
  `
})
export class AppComponent { }

When enableRtl is true, the icon appears on the right and text flows right-to-left.

---

Screen Reader Support

Because the component uses role="alert", screen readers (NVDA, JAWS, VoiceOver, etc.) will:

• Automatically announce the message content when the Message component is rendered or becomes visible.
• Announce the close action when the close icon is activated.

No additional markup or ARIA attributes are needed for basic screen reader functionality.

---

Testing Accessibility

Syncfusion validates the Message component's accessibility using:

• accessibility-checker npm package
• axe-core npm package

To test in your app, use either tool in your test suite or run them against your rendered pages. Both tools will confirm compliance with the WCAG 2.2 and Section 508 standards.

API Reference – Syncfusion Angular Message

Source: https://ej2.syncfusion.com/angular/documentation/api/message/index-default Package: @syncfusion/ej2-angular-notifications Selector: ejs-message Class: MessageComponent

Table of Contents

• Properties
• Methods
• Events
• Type References

---

Properties

content

string | object Default: null

Specifies the content to be displayed in the Message component. It can be a paragraph, a list, or any other HTML element. Can also be provided via <ng-template #content> inside the component tag.

<ejs-message content="Please read the comments carefully"></ejs-message>

---

cssClass

string Default: ''

Specifies one or more CSS classes (space-separated) to append to the root element of the Message component. Use this to customize the message appearance or apply alignment helpers.

Built-in alignment classes: e-content-center, e-content-right

<ejs-message cssClass="e-content-center custom-msg" severity="Warning" content="License expiring soon"></ejs-message>

---

enablePersistence

boolean Default: false

Enable or disable persisting the component's state between page reloads.

<ejs-message [enablePersistence]="true" content="State will persist on reload"></ejs-message>

---

enableRtl

boolean Default: false

Enable or disable rendering the component in right-to-left direction. Used for RTL language support (Arabic, Hebrew, etc.).

<ejs-message [enableRtl]="true" content="نص عربي" severity="Info"></ejs-message>

---

locale

string Default: ''

Overrides the global culture and localization value for this component. The default global culture is 'en-US'.

<ejs-message locale="fr-FR" content="Un message en français"></ejs-message>

---

severity

string | Severity Default: Severity.Normal ('Normal')

Specifies the severity of the message. Controls the icon displayed and the color scheme applied.

<ejs-message severity="Error" content="A problem occurred while submitting your data"></ejs-message>

---

showCloseIcon

boolean Default: false

Shows or hides the close icon in the Message component. When the end user clicks the close icon, the message hides and the closed event is triggered.

<ejs-message [showCloseIcon]="true" severity="Warning" content="Network issue detected"></ejs-message>

---

showIcon

boolean Default: true

Shows or hides the severity icon in the Message component. When true, the icon is displayed at the left edge of the component. The icon changes based on the severity property.

<ejs-message [showIcon]="false" severity="Info" content="No icon shown"></ejs-message>

---

variant

string | Variant Default: Variant.Text ('Text')

Specifies the variant from predefined appearance variants.

<ejs-message variant="Filled" severity="Success" content="Operation completed"></ejs-message>

---

visible

boolean Default: true

Shows or hides the entire Message component. Set to false to hide; set back to true to show.

// Programmatically restore a dismissed message
@ViewChild('msg') msg!: MessageComponent;

reopenMessage(): void {
  this.msg.visible = true;
}

<ejs-message #msg [visible]="isVisible" severity="Info" content="This can be toggled"></ejs-message>

---

Methods

destroy()

Returns: void

Removes the Message component from the DOM and detaches all bound events. Also removes component attributes and classes.

@ViewChild('msg') msg!: MessageComponent;

removeMessage(): void {
  this.msg.destroy();
}

After calling destroy(), the component instance is no longer usable. For hiding/showing, use the visible property instead.

---

getPersistData()

Returns: string

Returns a JSON string of the persisted state properties of the Message component. Used internally when enablePersistence is true.

@ViewChild('msg') msg!: MessageComponent;

logPersistedState(): void {
  const state = this.msg.getPersistData();
  console.log(state);
}

---

Events

closed

Type: EmitType<MessageCloseEventArgs>

Triggers when the Message component is closed (i.e., the user clicks the close icon). Requires showCloseIcon to be true.

<ejs-message [showCloseIcon]="true" severity="Warning" (closed)="onClosed($event)">
  Network issue detected
</ejs-message>

onClosed(args: any): void {
  console.log('Message closed');
}

See Type References for MessageCloseEventArgs.

---

created

Type: EmitType<Object>

Triggers when the Message component is created and rendered successfully.

<ejs-message (created)="onCreated()">Message content</ejs-message>

onCreated(): void {
  console.log('Message component created');
}

---

destroyed

Type: EmitType<Event>

Triggers when the Message component is destroyed via the destroy() method.

<ejs-message (destroyed)="onDestroyed()">Message content</ejs-message>

onDestroyed(): void {
  console.log('Message component destroyed');
}

---

Type References

MessageCloseEventArgs

The argument passed to the closed event handler.

The closed event payload is of type MessageCloseEventArgs. Import from @syncfusion/ej2-angular-notifications if you need to type the handler parameter:

import { MessageCloseEventArgs } from '@syncfusion/ej2-angular-notifications';

onClosed(args: MessageCloseEventArgs): void {
  // handle close
}

---

Severity Enum

// Equivalent string values
type Severity = 'Normal' | 'Info' | 'Success' | 'Warning' | 'Error';

---

Variant Enum

// Equivalent string values
type Variant = 'Text' | 'Outlined' | 'Filled';

Customization and Templates – Syncfusion Angular Message

Table of Contents

• Content Alignment
• Rounded and Square Borders
• Custom CSS via cssClass
• CSS-Only Message (No Script)
• Predefined CSS Classes Reference
• HTML Template via ng-template

---

Content Alignment

By default, message content is aligned to the left. Use these built-in CSS classes via the cssClass property to change alignment:

import { MessageModule } from '@syncfusion/ej2-angular-notifications';
import { Component } from '@angular/core';

@Component({
  imports: [MessageModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="msg-custom-section">
      <div class="content-section">
        <h4>Content Alignment</h4>
        <ejs-message id="msg_left" content="Your license has been activated successfully" severity="Success"></ejs-message>
        <ejs-message id="msg_center" content="The license will expire today" cssClass="e-content-center" severity="Warning"></ejs-message>
        <ejs-message id="msg_right" content="The license key is invalid" cssClass="e-content-right" severity="Error"></ejs-message>
      </div>
    </div>
  `
})
export class AppComponent { }

---

Rounded and Square Borders

The default message has standard rounded corners. You can further customize border radius using cssClass with your own CSS rules:

import { MessageModule } from '@syncfusion/ej2-angular-notifications';
import { Component } from '@angular/core';

@Component({
  imports: [MessageModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-message content="The license will expire today" cssClass="rounded" severity="Warning"></ejs-message>
    <ejs-message content="The license key is invalid" cssClass="square" severity="Error"></ejs-message>
  `,
  styles: [`
    .rounded.e-message { border-radius: 20px; }
    .square.e-message { border-radius: 0; }
  `]
})
export class AppComponent { }

---

Custom CSS via cssClass

The cssClass property appends one or more CSS classes to the root element of the Message component. Use this to override any default styling:

<ejs-message cssClass="my-custom-msg" content="Custom styled message"></ejs-message>

.my-custom-msg.e-message {
  border: 2px dashed #6c63ff;
  border-radius: 8px;
}
.my-custom-msg .e-msg-content {
  font-weight: bold;
  color: #6c63ff;
}

Multiple classes are space-separated:

<ejs-message cssClass="e-content-center rounded" severity="Success" content="Done!"></ejs-message>

---

CSS-Only Message (No Script)

For lightweight scenarios where no Angular component instance is needed, use the predefined CSS classes directly on plain HTML elements. This renders a message without any JavaScript reference:

Basic structure (content only):

<div class="e-message">
  <div class="e-msg-content">..content..</div>
</div>

With icon:

<div class="e-message">
  <span class="e-msg-icon"></span>
  <div class="e-msg-content">..content..</div>
</div>

Example with all severities:

import { Component } from '@angular/core';

@Component({
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="msg-default-section">
      <div class="content-section">
        <div id="msg-default" class="e-message" role="alert">
          <span class="e-msg-icon"></span>
          <div class="e-msg-content">Editing is restricted</div>
        </div>
        <div id="msg-info" class="e-message e-info" role="alert">
          <span class="e-msg-icon"></span>
          <div class="e-msg-content">Please read the comments carefully</div>
        </div>
        <div id="msg-success" class="e-message e-success" role="alert">
          <span class="e-msg-icon"></span>
          <div class="e-msg-content">Your message has been sent successfully</div>
        </div>
        <div id="msg-warning" class="e-message e-warning" role="alert">
          <span class="e-msg-icon"></span>
          <div class="e-msg-content">There was a problem with your network connection</div>
        </div>
        <div id="msg-error" class="e-message e-error" role="alert">
          <span class="e-msg-icon"></span>
          <div class="e-msg-content">A problem occurred while submitting your data</div>
        </div>
      </div>
    </div>
  `
})
export class AppComponent { }

---

Predefined CSS Classes Reference

---

HTML Template via ng-template

For rich content (HTML elements, embedded components), use <ng-template #content> inside the ejs-message element instead of the content property:

import { MessageModule, MessageComponent } from '@syncfusion/ej2-angular-notifications';
import { ButtonModule, ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { Component, ViewChild } from '@angular/core';

@Component({
  imports: [MessageModule, ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="msg-template-section">
      <div class="content-section">
        <button ejs-button #showBtn id="showBtn" content="Show pull request"
          cssClass="e-outline e-primary e-success msg-hidden" (click)="showClick()"></button>
        <ejs-message #msg_template id="msg_template" severity="Success" (closed)="closed()">
          <ng-template #content>
            <h1>Merged pull request</h1>
            <p>Pull request #41 merged after a successful build</p>
            <button ejs-button id="commitBtn" cssClass="e-link" content="View commit"></button>
            <button ejs-button #closeBtn id="closeBtn" cssClass="e-link" content="Dismiss" (click)="dismissClick()"></button>
          </ng-template>
        </ejs-message>
      </div>
    </div>
  `
})
export class AppComponent {
  @ViewChild('showBtn') private showBtn!: ButtonComponent;
  @ViewChild('msg_template') private msgTemplate!: MessageComponent;

  showClick(): void {
    this.msgTemplate.visible = true;
    this.showBtn.element.classList.add('msg-hidden');
  }

  dismissClick(): void {
    this.msgTemplate.visible = false;
  }

  closed(): void {
    this.showBtn.element.classList.remove('msg-hidden');
  }
}

Use <ng-template #content> for any case where the message body contains Angular components (buttons, icons, etc.) or complex HTML structures. The content property only accepts plain strings or HTML string values.

Getting Started – Syncfusion Angular Message

Table of Contents

• Prerequisites
• Install the Package
• Add CSS Reference
• Add the Message Component
• Run the Application

---

Prerequisites

• Angular CLI installed globally: npm install -g @angular/cli
• This guide targets Angular 19+ using standalone components (default since Angular 19).

Create a new app if needed:

ng new syncfusion-angular-app
cd syncfusion-angular-app

---

Install the Package

Use ng add to install the Syncfusion Notifications package. This automatically adds the dependency to package.json, imports the component, and registers the default Material3 theme in angular.json:

ng add @syncfusion/ej2-angular-notifications

For Angular 12–15 (legacy/ngcc builds):

npm add @syncfusion/ej2-angular-notifications@32.1.19-ngcc

---

Add CSS Reference

After ng add, the Material3 theme is registered automatically. To style only the Message component manually:

/* styles.css */
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-angular-notifications/styles/message/material3.css';

Import order matters — ej2-base must come before the component styles.

For SCSS users, update styles.scss accordingly using the .scss variants of the same paths.

---

Add the Message Component

In your src/app/app.ts (Angular 20+) or src/app/app.component.ts (Angular 19 and below), import MessageModule and add ejs-message to the template:

import { MessageModule } from '@syncfusion/ej2-angular-notifications';
import { Component } from '@angular/core';

@Component({
  imports: [MessageModule],
  standalone: true,
  selector: 'app-root',
  template: '<ejs-message content="Please read the comments carefully"></ejs-message>'
})
export class AppComponent { }

The content property sets the message text. Without specifying a severity, the message renders in the default Normal style.

You can also nest content directly inside the tag instead of using the content property:

template: `<ejs-message>Please read the comments carefully</ejs-message>`

---

Run the Application

ng serve --open

The browser opens with the message rendered. The output shows a simple informational message with the default Normal severity styling.

Minimal Bootstrap (main.ts)

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';

bootstrapApplication(AppComponent).catch((err) => console.error(err));

Icons and Close Icon – Syncfusion Angular Message

Table of Contents

• Severity Icon
• Hiding the Severity Icon
• Custom Severity Icon
• Close Icon
• Handling the closed Event
• Restoring Visibility Programmatically

---

Severity Icon

By default, the Message component shows a severity-appropriate icon on the left edge (showIcon defaults to true). The icon changes automatically based on the severity property:

• Normal — default icon
• Info — information icon
• Success — checkmark icon
• Warning — warning/triangle icon
• Error — error/circle icon

---

Hiding the Severity Icon

To hide the severity icon, set showIcon to false:

import { MessageModule } from '@syncfusion/ej2-angular-notifications';
import { Component } from '@angular/core';

@Component({
  imports: [MessageModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="msg-default-section">
      <div class="content-section">
        <ejs-message id="msg_default" content="Editing is restricted" [showIcon]="false"></ejs-message>
        <ejs-message id="msg_info" content="Please read the comments carefully" severity="Info" [showIcon]="false"></ejs-message>
        <ejs-message id="msg_success" content="Your message has been sent successfully" severity="Success" [showIcon]="false"></ejs-message>
        <ejs-message id="msg_warning" content="There was a problem with your network connection" severity="Warning" [showIcon]="false"></ejs-message>
        <ejs-message id="msg_error" content="A problem occurred while submitting your data" severity="Error" [showIcon]="false"></ejs-message>
      </div>
    </div>
  `
})
export class AppComponent { }

---

Custom Severity Icon

To override the default severity icon with a custom one, use the cssClass property to apply a CSS class that targets the icon element (.e-msg-icon):

<ejs-message id="msg_icon" cssClass="custom">
  Essential JS 2 is a modern JavaScript UI Controls library built to be lightweight and touch friendly.
</ejs-message>

/* In your component or global CSS */
.custom .e-msg-icon {
  /* Replace with your custom icon using background-image or font-icon */
  background-image: url('path/to/icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

Only use cssClass to customize the icon. Do not directly modify the severity icon element class.

---

Close Icon

The Message component optionally renders a close icon to let users dismiss the message. By default, showCloseIcon is false.

To enable the close icon:

<ejs-message severity="Warning" [showCloseIcon]="true">
  There was a problem with your network connection
</ejs-message>

When the user clicks the close icon (or uses the keyboard), the message hides and the closed event fires.

---

Handling the closed Event

Use the (closed) event binding to detect when the user dismisses the message. The event receives a MessageCloseEventArgs object:

import { MessageModule, MessageComponent } from '@syncfusion/ej2-angular-notifications';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component, ViewChild } from '@angular/core';

@Component({
  imports: [MessageModule, ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="msg-icon-section">
      <div class="content-section">
        <button #btn1 ejs-button content="Show Default Message" cssClass="e-outline e-primary msg-hidden" (click)="defaultClick()"></button>
        <ejs-message #msg_default id="msg_default" [showCloseIcon]="true" (closed)="defaultClosed()">Editing is restricted</ejs-message>

        <button #btn2 ejs-button content="Show Info Message" cssClass="e-outline e-primary e-info msg-hidden" (click)="infoClick()"></button>
        <ejs-message #msg_info id="msg_info" severity="Info" [showCloseIcon]="true" (closed)="infoClosed()">Please read the comments carefully</ejs-message>

        <button #btn3 ejs-button content="Show Success Message" cssClass="e-outline e-primary e-success msg-hidden" (click)="successClick()"></button>
        <ejs-message #msg_success id="msg_success" severity="Success" [showCloseIcon]="true" (closed)="successClosed()">Your message has been sent successfully</ejs-message>
      </div>
    </div>
  `
})
export class AppComponent {
  @ViewChild('btn1') private defaultBtn: any;
  @ViewChild('btn2') private infoBtn: any;
  @ViewChild('btn3') private successBtn: any;
  @ViewChild('msg_default') private msgDefault!: MessageComponent;
  @ViewChild('msg_info') private msgInfo!: MessageComponent;
  @ViewChild('msg_success') private msgSuccess!: MessageComponent;

  defaultClick(): void { this.msgDefault.visible = true; this.defaultBtn.element.classList.add('msg-hidden'); }
  defaultClosed(): void { this.defaultBtn.element.classList.remove('msg-hidden'); }

  infoClick(): void { this.msgInfo.visible = true; this.infoBtn.element.classList.add('msg-hidden'); }
  infoClosed(): void { this.infoBtn.element.classList.remove('msg-hidden'); }

  successClick(): void { this.msgSuccess.visible = true; this.successBtn.element.classList.add('msg-hidden'); }
  successClosed(): void { this.successBtn.element.classList.remove('msg-hidden'); }
}

---

Restoring Visibility Programmatically

After a message is closed, restore it by setting visible = true on the component reference:

// In component class:
@ViewChild('msg') msg!: MessageComponent;

reopenMessage(): void {
  this.msg.visible = true;
}

<ejs-message #msg severity="Error" [showCloseIcon]="true">
  A problem occurred while submitting your data
</ejs-message>
<button (click)="reopenMessage()">Show again</button>

visible is the correct API to programmatically show/hide the message — do not use CSS display manipulation directly.

Severities – Syncfusion Angular Message

Table of Contents

• Overview
• Available Severity Types
• When to Use Each Severity
• Code Example

---

Overview

The severity property controls the icon and color used to convey the importance and context of a message. Each severity maps to a distinct visual style so users can instantly recognize message types.

Default: Normal

<ejs-message severity="Info" content="Please read the comments carefully"></ejs-message>

---

Available Severity Types

---

When to Use Each Severity

• Normal — Neutral messages where no emphasis is needed, such as general notes or help text.
• Info — Non-urgent tips or informational guidance the user should be aware of.
• Success — Confirming that an action completed successfully (e.g., form saved, file uploaded).
• Warning — Alerting the user to a potential issue that may require attention (e.g., expiring license, slow network).
• Error — Indicating that something failed and likely requires the user to take action (e.g., validation error, submission failure).

---

Code Example

The following example renders all five severity types together:

import { MessageModule } from '@syncfusion/ej2-angular-notifications';
import { Component } from '@angular/core';

@Component({
  imports: [MessageModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="msg-default-section">
      <div class="content-section">
        <ejs-message id="msg_default" content="Editing is restricted"></ejs-message>
        <ejs-message id="msg_info" content="Please read the comments carefully" severity="Info"></ejs-message>
        <ejs-message id="msg_success" content="Your message has been sent successfully" severity="Success"></ejs-message>
        <ejs-message id="msg_warning" content="There was a problem with your network connection" severity="Warning"></ejs-message>
        <ejs-message id="msg_error" content="A problem occurred while submitting your data" severity="Error"></ejs-message>
      </div>
    </div>
  `
})
export class AppComponent { }

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Tip: The severity property accepts a string value. It is case-sensitive — use the exact casing shown (Normal, Info, Success, Warning, Error).

Variants – Syncfusion Angular Message

Table of Contents

• Overview
• Available Variants
• When to Use Each Variant
• Combining Variant and Severity
• Code Example – All Combinations

---

Overview

The variant property controls the visual presentation style of the Message component. It changes how colors and borders are applied to the message container, while severity still determines the icon and color scheme.

Default: Text

<ejs-message severity="Success" variant="Filled" content="Your message has been sent successfully"></ejs-message>

---

Available Variants

---

When to Use Each Variant

• Text — Suitable for most use cases; subtle, blends into the UI without demanding too much attention.
• Outlined — Good for minimal or light-themed UIs where you want structure without background color.
• Filled — Best for prominent alerts that need to stand out, such as critical warnings or success banners.

---

Combining Variant and Severity

Every variant works with every severity. For example:

<!-- Filled + Error — high prominence error message -->
<ejs-message severity="Error" variant="Filled" content="A problem occurred while submitting your data"></ejs-message>

<!-- Outlined + Warning — subtle warning in a clean UI -->
<ejs-message severity="Warning" variant="Outlined" content="There was a problem with your network connection"></ejs-message>

<!-- Text + Info — default informational note -->
<ejs-message severity="Info" variant="Text" content="Please read the comments carefully"></ejs-message>

---

Code Example – All Combinations

The following example shows all three variants alongside each severity:

import { MessageModule } from '@syncfusion/ej2-angular-notifications';
import { Component } from '@angular/core';

@Component({
  imports: [MessageModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="msg-variant-section">
      <div class="content-section">
        <h4>Filled</h4>
        <ejs-message id="msg_default_filled" variant="Filled">Editing is restricted</ejs-message>
        <ejs-message id="msg_info_filled" severity="Info" variant="Filled">Please read the comments carefully</ejs-message>
        <ejs-message id="msg_success_filled" severity="Success" variant="Filled">Your message has been sent successfully</ejs-message>
        <ejs-message id="msg_warning_filled" severity="Warning" variant="Filled">There was a problem with your network connection</ejs-message>
        <ejs-message id="msg_error_filled" severity="Error" variant="Filled">A problem occurred while submitting your data</ejs-message>
      </div>
      <div class="content-section">
        <h4>Outlined</h4>
        <ejs-message id="msg_default_outlined" variant="Outlined">Editing is restricted</ejs-message>
        <ejs-message id="msg_info_outlined" severity="Info" variant="Outlined">Please read the comments carefully</ejs-message>
        <ejs-message id="msg_success_outlined" severity="Success" variant="Outlined">Your message has been sent successfully</ejs-message>
        <ejs-message id="msg_warning_outlined" severity="Warning" variant="Outlined">There was a problem with your network connection</ejs-message>
        <ejs-message id="msg_error_outlined" severity="Error" variant="Outlined">A problem occurred while submitting your data</ejs-message>
      </div>
      <div class="content-section">
        <h4>Text</h4>
        <ejs-message id="msg_default">Editing is restricted</ejs-message>
        <ejs-message id="msg_info" severity="Info">Please read the comments carefully</ejs-message>
        <ejs-message id="msg_success" severity="Success">Your message has been sent successfully</ejs-message>
        <ejs-message id="msg_warning" severity="Warning">There was a problem with your network connection</ejs-message>
        <ejs-message id="msg_error" severity="Error">A problem occurred while submitting your data</ejs-message>
      </div>
    </div>
  `
})
export class AppComponent { }

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Tip: The variant value is case-sensitive — use Text, Outlined, or Filled exactly.

Accessibility Features

Table of Contents

• Overview
• WCAG and Compliance Standards
• Screen Reader Support
• WAI-ARIA Attributes
• Right-to-Left (RTL) Support
• Keyboard Navigation
• Color Contrast
• Focus Management
• Accessibility Validation

Overview

The Skeleton component follows accessibility guidelines and standards to ensure loading states are perceivable by all users, including those using assistive technologies. The component is fully compliant with:

• WCAG 2.2 - Web Content Accessibility Guidelines
• Section 508 - Americans with Disabilities Act compliance
• Screen Readers - Works with NVDA, JAWS, and VoiceOver
• Keyboard Navigation - Fully keyboard accessible
• Color Contrast - Meets minimum contrast ratios
• Mobile Device Support - Accessible on iOS and Android

WCAG and Compliance Standards

The Skeleton component meets the following accessibility standards:

WCAG 2.2 Compliance Levels

The Skeleton component meets:

• Level A - Basic accessibility
• Level AA - Enhanced accessibility (recommended)
• Level AAA - Enhanced accessibility (best)

Section 508 Compliance

Full compliance with Section 508 requirements for:

• Perceivable content
• Operable components
• Understandable interactions
• Robust code structure

Screen Reader Support

The Skeleton component provides proper semantics for screen readers to announce loading states to users.

Basic Screen Reader Announcement

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-accessible-skeleton',
  template: `
    <ejs-skeleton 
      height="15px" 
      label="Loading content, please wait...">
    </ejs-skeleton>
  `
})
export class AccessibleSkeletonComponent {}

Live Region Support

Screen readers announce content changes in live regions automatically:

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-live-region-skeleton',
  template: `
    <div role="status" aria-live="polite" aria-busy="true">
      <ejs-skeleton width="100%" height="100px" label="Loading..."></ejs-skeleton>
      <p>Content is loading. Please wait.</p>
    </div>
  `
})
export class LiveRegionSkeletonComponent {}

Custom Screen Reader Text

// Provide descriptive labels for screen readers
<ejs-skeleton 
  shape="Circle" 
  width="50px"
  label="User profile photo placeholder">
</ejs-skeleton>

<ejs-skeleton 
  width="100%" 
  height="150px"
  label="Featured image loading">
</ejs-skeleton>

<ejs-skeleton 
  width="80%" 
  height="15px"
  label="Article title placeholder">
</ejs-skeleton>

WAI-ARIA Attributes

The Skeleton component supports and implements WAI-ARIA attributes for proper semantic communication.

ARIA Attributes Used

Using aria-label

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-aria-label-skeleton',
  template: `
    <!-- Using label property (sets aria-label internally) -->
    <ejs-skeleton 
      shape="Circle" 
      width="50px"
      label="User profile picture loading">
    </ejs-skeleton>
  `
})
export class AriaLabelSkeletonComponent {}

Using aria-busy

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-aria-busy-skeleton',
  template: `
    <div [attr.aria-busy]="isLoading">
      <ejs-skeleton 
        width="100%" 
        height="100px"
        label="Content is loading">
      </ejs-skeleton>
    </div>
  `
})
export class AriaBusySkeletonComponent {
  isLoading = true;
  
  ngOnInit() {
    setTimeout(() => {
      this.isLoading = false;
    }, 2000);
  }
}

Using aria-live

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-aria-live-skeleton',
  template: `
    <!-- Announce loading status to screen readers -->
    <div role="status" aria-live="polite" aria-atomic="true">
      <p *ngIf="isLoading">{{ statusMessage }}</p>
      <ejs-skeleton *ngIf="isLoading" width="100%" height="100px"></ejs-skeleton>
    </div>
  `
})
export class AriaLiveSkeletonComponent {
  isLoading = true;
  statusMessage = 'Loading content, please wait...';
}

Right-to-Left (RTL) Support

The Skeleton component automatically adjusts for right-to-left languages and layouts.

Enable RTL

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-rtl-skeleton',
  template: `
    <ejs-skeleton 
      width="100%" 
      height="100px"
      [enableRtl]="true">
    </ejs-skeleton>
  `
})
export class RtlSkeletonComponent {}

RTL Layout

import { Component, OnInit } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-rtl-aware-skeleton',
  template: `
    <div [dir]="direction">
      <ejs-skeleton 
        width="100%" 
        height="100px"
        [enableRtl]="isRtlDirection">
      </ejs-skeleton>
    </div>
  `
})
export class RtlAwareSkeletonComponent implements OnInit {
  direction: 'ltr' | 'rtl' = 'ltr';
  isRtlDirection = false;
  
  ngOnInit() {
    // Detect language or user preference
    const language = document.documentElement.lang;
    if (['ar', 'he', 'fa', 'ur'].includes(language)) {
      this.direction = 'rtl';
      this.isRtlDirection = true;
    }
  }
}

RTL with Arabic Example

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-arabic-skeleton',
  template: `
    <div dir="rtl" lang="ar">
      <h1>جاري التحميل...</h1>
      <ejs-skeleton 
        width="100%" 
        height="100px"
        label="جاري تحميل المحتوى"
        [enableRtl]="true">
      </ejs-skeleton>
    </div>
  `,
  styles: [`
    :host ::ng-deep { direction: rtl; }
  `]
})
export class ArabicSkeletonComponent {}

Keyboard Navigation

The Skeleton component is accessible via keyboard navigation. While skeletons themselves are not interactive, they can be part of accessible content flows.

Focus Management

import { Component, ViewChild, ElementRef } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-keyboard-skeleton',
  template: `
    <div role="status" aria-live="polite">
      <ejs-skeleton 
        #skeletonElement
        width="100%" 
        height="100px"
        label="Loading content">
      </ejs-skeleton>
    </div>
  `
})
export class KeyboardSkeletonComponent {
  @ViewChild('skeletonElement') skeletonElement!: ElementRef;
}

Skip Links with Skeleton

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-skip-link-skeleton',
  template: `
    <a href="#main-content" class="skip-link">Skip to main content</a>
    
    <div role="status" aria-live="polite">
      <ejs-skeleton width="100%" height="100px" label="Loading"></ejs-skeleton>
    </div>
    
    <main id="main-content">
      <!-- Main content here -->
    </main>
  `,
  styles: [`
    .skip-link {
      position: absolute;
      top: -9999px;
    }
    
    .skip-link:focus {
      top: 0;
      left: 0;
      z-index: 100;
    }
  `]
})
export class SkipLinkSkeletonComponent {}

Color Contrast

The Skeleton component meets WCAG color contrast requirements for all themes and states.

Contrast Ratios

• Normal text: Minimum 4.5:1 contrast ratio
• Large text (18pt+): Minimum 3:1 contrast ratio
• UI components: Minimum 3:1 contrast ratio

High Contrast Support

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-high-contrast-skeleton',
  template: `
    <ejs-skeleton 
      width="100%" 
      height="100px"
      cssClass="high-contrast-skeleton">
    </ejs-skeleton>
  `,
  styles: [`
    @media (prefers-contrast: more) {
      :global(.high-contrast-skeleton) {
        background: #000 !important;
        filter: invert(1);
      }
    }
  `]
})
export class HighContrastSkeletonComponent {}

Dark Mode Support

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-dark-mode-skeleton',
  template: `
    <ejs-skeleton 
      width="100%" 
      height="100px"
      [cssClass]="isDarkMode ? 'dark-theme' : 'light-theme'">
    </ejs-skeleton>
  `,
  styles: [`
    :global(.dark-theme) {
      background: #424242;
    }
    
    :global(.light-theme) {
      background: #f5f5f5;
    }
    
    @media (prefers-color-scheme: dark) {
      :global(.light-theme) {
        background: #424242;
      }
    }
  `]
})
export class DarkModeSkeletonComponent {
  isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
}

Focus Management

Ensure proper focus management when content loads.

Focus Transfer on Content Load

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-focus-management-skeleton',
  template: `
    <div *ngIf="isLoading" role="status" aria-live="polite">
      <ejs-skeleton width="100%" height="100px" label="Loading content"></ejs-skeleton>
    </div>
    
    <div *ngIf="!isLoading" #contentRef>
      <h2>Content Loaded</h2>
      <p>This content is now visible and focused.</p>
    </div>
  `
})
export class FocusManagementComponent implements OnInit {
  @ViewChild('contentRef') contentRef!: ElementRef;
  
  isLoading = true;
  
  ngOnInit() {
    setTimeout(() => {
      this.isLoading = false;
      // Transfer focus to loaded content
      setTimeout(() => {
        const heading = this.contentRef.nativeElement.querySelector('h2');
        heading?.focus();
      });
    }, 2000);
  }
}

Focus Visible

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-focus-visible-skeleton',
  template: `
    <ejs-skeleton width="100%" height="100px" cssClass="focus-visible-skeleton"></ejs-skeleton>
  `,
  styles: [`
    :global(.focus-visible-skeleton:focus-visible) {
      outline: 3px solid #4A90E2;
      outline-offset: 2px;
    }
  `]
})
export class FocusVisibleComponent {}

Accessibility Validation

Use accessibility validation tools to ensure compliance.

Using Accessibility Checker

The Skeleton component passes validation with:

// Install accessibility-checker
npm install --save-dev accessibility-checker

// Use in tests
import { checkAccess } from 'accessibility-checker';

describe('Skeleton Accessibility', () => {
  it('should pass accessibility checks', async () => {
    const result = await checkAccess(document);
    expect(result.violations.length).toBe(0);
  });
});

Using Axe-core

// Install axe-core
npm install --save-dev axe-core axe-playwright

// Use in tests
import { injectAxe, checkA11y } from 'axe-playwright';

describe('Skeleton Axe Accessibility', () => {
  it('should have no accessibility violations', async () => {
    await injectAxe(page);
    await checkA11y(page);
  });
});

Testing Accessibility

// Test with screen reader simulation
describe('Skeleton Screen Reader Support', () => {
  it('should have proper aria-label', () => {
    const skeleton = document.querySelector('ejs-skeleton');
    expect(skeleton?.getAttribute('aria-label')).toBeTruthy();
  });
  
  it('should have correct role', () => {
    const skeleton = document.querySelector('ejs-skeleton');
    expect(skeleton?.getAttribute('role')).toBe('status');
  });
});

API Reference

Table of Contents

• Overview
• Properties
• Methods
• Type Definitions
• Examples by Property

Overview

The Skeleton component provides a comprehensive API for creating loading placeholders. This reference covers all properties, methods, type definitions, and usage examples.

Properties

All properties can be bound using property binding syntax [property]="value" in Angular templates.

cssClass

Type: string Default: ""

Defines single or multiple CSS classes (separated by space) to be used for customization of the Skeleton component.

Usage:

<ejs-skeleton cssClass="e-customize custom-skeleton"></ejs-skeleton>

Example:

@Component({
  template: `
    <ejs-skeleton 
      width="100%" 
      height="100px"
      cssClass="custom-wave light-theme">
    </ejs-skeleton>
  `,
  styles: [`
    :global(.custom-wave) {
      background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    }
    :global(.light-theme) {
      background-color: #f5f5f5;
    }
  `]
})
export class CustomSkeletonComponent {}

enablePersistence

Type: boolean Default: false

Enable or disable persisting component's state between page reloads. When enabled, the component state is stored in browser storage and restored on page reload.

Usage:

<ejs-skeleton [enablePersistence]="true"></ejs-skeleton>

Example:

@Component({
  template: `
    <ejs-skeleton 
      width="100%" 
      height="50px"
      [enablePersistence]="true">
    </ejs-skeleton>
  `
})
export class PersistentSkeletonComponent {}

enableRtl

Type: boolean Default: false

Enable or disable rendering component in right-to-left (RTL) direction. Automatically handles layout mirroring for RTL languages like Arabic, Hebrew, and Persian.

Usage:

<ejs-skeleton [enableRtl]="true"></ejs-skeleton>

Example:

@Component({
  template: `
    <div [dir]="direction">
      <ejs-skeleton 
        width="100%" 
        height="100px"
        [enableRtl]="isRtl">
      </ejs-skeleton>
    </div>
  `
})
export class RtlSkeletonComponent {
  direction: 'ltr' | 'rtl' = 'rtl';
  isRtl = true;
}

height

Type: string | number Default: ""

Defines the height of the Skeleton component. Height is not required when shape is "Circle" or "Square" (they use width for both dimensions). Can be specified in pixels, percentages, or other CSS units.

Usage:

<ejs-skeleton height="100px"></ejs-skeleton>
<ejs-skeleton height="50%"></ejs-skeleton>
<ejs-skeleton [height]="200"></ejs-skeleton>

Example:

@Component({
  template: `
    <!-- Fixed height in pixels -->
    <ejs-skeleton width="100%" height="100px"></ejs-skeleton>
    
    <!-- Percentage height -->
    <ejs-skeleton width="80%" height="50%"></ejs-skeleton>
    
    <!-- Dynamic height -->
    <ejs-skeleton 
      width="100%" 
      [height]="dynamicHeight">
    </ejs-skeleton>
  `
})
export class HeightSkeletonComponent {
  dynamicHeight = 150;
}

label

Type: string Default: "Loading…"

Defines the 'aria-label' for Skeleton component accessibility. This text is read by screen readers to describe the loading state to users with visual impairments.

Usage:

<ejs-skeleton label="Loading content, please wait..."></ejs-skeleton>

Example:

@Component({
  template: `
    <ejs-skeleton 
      shape="Circle" 
      width="50px"
      label="User profile photo loading">
    </ejs-skeleton>
    
    <ejs-skeleton 
      width="100%" 
      height="150px"
      label="Featured image placeholder">
    </ejs-skeleton>
    
    <ejs-skeleton 
      width="80%" 
      height="15px"
      label="Article title loading">
    </ejs-skeleton>
  `
})
export class AccessibleSkeletonComponent {}

locale

Type: string Default: '' (uses global culture)

Overrides the global culture and localization value for this component. Default global culture is 'en-US'. Allows you to use different locale-specific settings.

Usage:

<ejs-skeleton locale="ar"></ejs-skeleton>
<ejs-skeleton locale="zh"></ejs-skeleton>

Example:

@Component({
  template: `
    <!-- Uses component-specific locale -->
    <ejs-skeleton width="100%" height="50px" locale="de"></ejs-skeleton>
    
    <!-- Uses global locale -->
    <ejs-skeleton width="100%" height="50px"></ejs-skeleton>
  `
})
export class LocaleSkeletonComponent {}

shape

Type: string | SkeletonType Default: SkeletonType.Text

Defines the shape of the Skeleton component. Supported shapes are used to match the layout of different content types.

Supported shapes:

• Text (default) - For text content and paragraphs
• Circle - For avatars and profile pictures
• Square - For thumbnails and icons
• Rectangle - For images and cards

Usage:

<ejs-skeleton shape="Text"></ejs-skeleton>
<ejs-skeleton shape="Circle" width="50px"></ejs-skeleton>
<ejs-skeleton shape="Square" width="48px"></ejs-skeleton>
<ejs-skeleton shape="Rectangle" width="200px" height="150px"></ejs-skeleton>

<!-- Using enum -->
<ejs-skeleton [shape]="shapeType"></ejs-skeleton>

Example:

import { Component } from '@angular/core';
import { SkeletonType } from '@syncfusion/ej2-angular-notifications';

@Component({
  template: `
    <!-- Text skeleton (default) -->
    <ejs-skeleton width="80%" height="15px"></ejs-skeleton>
    
    <!-- Circle skeleton -->
    <ejs-skeleton shape="Circle" width="50px"></ejs-skeleton>
    
    <!-- Square skeleton -->
    <ejs-skeleton shape="Square" width="48px"></ejs-skeleton>
    
    <!-- Rectangle skeleton -->
    <ejs-skeleton shape="Rectangle" width="100%" height="200px"></ejs-skeleton>
    
    <!-- Dynamic shape -->
    <ejs-skeleton [shape]="currentShape" width="100px"></ejs-skeleton>
  `
})
export class ShapeSkeletonComponent {
  currentShape: SkeletonType = 'Circle';
  
  changeShape(newShape: SkeletonType) {
    this.currentShape = newShape;
  }
}

shimmerEffect

Type: string | ShimmerEffect Default: ShimmerEffect.Wave

Defines the animation effect of the Skeleton component. Supported effects create different visual animations to indicate loading state.

Supported effects:

• Wave (default) - Horizontal wave animation
• Pulse - Fade in/out animation
• Fade - Smooth opacity transition

Usage:

<ejs-skeleton shimmerEffect="Wave"></ejs-skeleton>
<ejs-skeleton shimmerEffect="Pulse"></ejs-skeleton>
<ejs-skeleton shimmerEffect="Fade"></ejs-skeleton>

<!-- Using enum -->
<ejs-skeleton [shimmerEffect]="effectType"></ejs-skeleton>

Example:

import { Component } from '@angular/core';
import { ShimmerEffect } from '@syncfusion/ej2-angular-notifications';

@Component({
  template: `
    <!-- Wave effect (default) -->
    <ejs-skeleton width="100%" height="50px" shimmerEffect="Wave"></ejs-skeleton>
    
    <!-- Pulse effect -->
    <ejs-skeleton width="100%" height="50px" shimmerEffect="Pulse"></ejs-skeleton>
    
    <!-- Fade effect -->
    <ejs-skeleton width="100%" height="50px" shimmerEffect="Fade"></ejs-skeleton>
    
    <!-- Dynamic effect -->
    <ejs-skeleton 
      width="100%" 
      height="50px"
      [shimmerEffect]="currentEffect">
    </ejs-skeleton>
  `
})
export class ShimmerEffectComponent {
  currentEffect: ShimmerEffect = 'Wave';
  
  changeEffect(newEffect: ShimmerEffect) {
    this.currentEffect = newEffect;
  }
}

visible

Type: boolean Default: true

Defines the visibility state of Skeleton component. Set to false to hide the skeleton, typically when content has finished loading.

Usage:

<ejs-skeleton [visible]="isLoading"></ejs-skeleton>
<ejs-skeleton [visible]="!isContentReady"></ejs-skeleton>

Example:

import { Component, OnInit } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';
import { NgIf } from '@angular/common';

@Component({
  imports: [SkeletonModule, NgIf],
  template: `
    <!-- Show skeleton while loading -->
    <div *ngIf="isLoading">
      <ejs-skeleton 
        width="100%" 
        height="200px"
        [visible]="isLoading">
      </ejs-skeleton>
    </div>
    
    <!-- Show content when loaded -->
    <div *ngIf="!isLoading">
      <img [src]="imageUrl" alt="Content">
    </div>
  `
})
export class VisibleSkeletonComponent implements OnInit {
  isLoading = true;
  imageUrl = '';
  
  ngOnInit() {
    setTimeout(() => {
      this.isLoading = false;
      this.imageUrl = 'assets/image.jpg';
    }, 2000);
  }
}

width

Type: string | number Default: ""

Defines the width of the Skeleton component. Width will be prioritized and used as dimension when shape is "Circle" or "Square". Can be specified in pixels, percentages, or other CSS units.

Usage:

<ejs-skeleton width="100px"></ejs-skeleton>
<ejs-skeleton width="100%"></ejs-skeleton>
<ejs-skeleton width="50vw"></ejs-skeleton>
<ejs-skeleton [width]="dynamicWidth"></ejs-skeleton>

Example:

@Component({
  template: `
    <!-- Fixed width in pixels -->
    <ejs-skeleton width="200px" height="100px"></ejs-skeleton>
    
    <!-- Percentage width -->
    <ejs-skeleton width="100%" height="100px"></ejs-skeleton>
    
    <!-- Viewport width -->
    <ejs-skeleton width="50vw" height="100px"></ejs-skeleton>
    
    <!-- Dynamic width -->
    <ejs-skeleton 
      [width]="containerWidth" 
      height="100px">
    </ejs-skeleton>
  `
})
export class WidthSkeletonComponent {
  containerWidth = '75%';
  
  updateWidth(newWidth: string) {
    this.containerWidth = newWidth;
  }
}

Methods

destroy

Signature: destroy(): void

Destroys the Skeleton component instance, removing it from the DOM and cleaning up event listeners and resources.

Usage:

@Component({
  template: `
    <ejs-skeleton #skeleton width="100%" height="50px"></ejs-skeleton>
    <button (click)="destroySkeleton()">Destroy</button>
  `
})
export class DestroySkeletonComponent {
  @ViewChild('skeleton') skeletonComponent!: any;
  
  destroySkeleton() {
    if (this.skeletonComponent) {
      this.skeletonComponent.destroy();
    }
  }
}

Type Definitions

SkeletonType

Enum representing the shape types available for the Skeleton component.

export type SkeletonType = 'Text' | 'Circle' | 'Square' | 'Rectangle';

// Or using enum
export enum SkeletonTypeEnum {
  Text = 'Text',
  Circle = 'Circle',
  Square = 'Square',
  Rectangle = 'Rectangle'
}

Values:

• 'Text' - Default rectangular shape for text content
• 'Circle' - Circular shape for avatars
• 'Square' - Square shape for icons
• 'Rectangle' - Rectangular shape for images

ShimmerEffect

Enum representing the animation effect types available for the Skeleton component.

export type ShimmerEffect = 'Wave' | 'Pulse' | 'Fade';

// Or using enum
export enum ShimmerEffectEnum {
  Wave = 'Wave',
  Pulse = 'Pulse',
  Fade = 'Fade'
}

Values:

• 'Wave' - Horizontal wave animation (default)
• 'Pulse' - Fade in/out animation
• 'Fade' - Smooth opacity transition

Examples by Property

Complete Example: All Properties

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';
import { SkeletonType, ShimmerEffect } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-complete-skeleton',
  template: `
    <div class="skeleton-examples">
      <!-- Text skeleton with all common properties -->
      <ejs-skeleton 
        width="100%" 
        height="15px"
        shape="Text"
        shimmerEffect="Wave"
        cssClass="custom-skeleton"
        label="Loading text content"
        [visible]="true"
        [enableRtl]="false"
        [enablePersistence]="false"
        locale="en-US">
      </ejs-skeleton>
      
      <!-- Circle skeleton -->
      <ejs-skeleton 
        shape="Circle"
        width="50px"
        shimmerEffect="Pulse"
        label="Loading profile picture"
        cssClass="avatar-skeleton">
      </ejs-skeleton>
      
      <!-- Square skeleton -->
      <ejs-skeleton 
        shape="Square"
        width="48px"
        shimmerEffect="Fade"
        label="Loading thumbnail"
        cssClass="thumbnail-skeleton">
      </ejs-skeleton>
      
      <!-- Rectangle skeleton -->
      <ejs-skeleton 
        shape="Rectangle"
        width="100%"
        height="200px"
        shimmerEffect="Wave"
        label="Loading image"
        cssClass="image-skeleton">
      </ejs-skeleton>
      
      <!-- Dynamic skeleton -->
      <ejs-skeleton 
        [width]="dynamicWidth"
        [height]="dynamicHeight"
        [shape]="currentShape"
        [shimmerEffect]="currentEffect"
        [visible]="isVisible"
        [cssClass]="dynamicClass">
      </ejs-skeleton>
    </div>
  `,
  styles: [`
    .skeleton-examples {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 16px;
    }
    
    :global(.custom-skeleton) {
      border-radius: 4px;
    }
    
    :global(.avatar-skeleton) {
      border-radius: 50%;
    }
  `]
})
export class CompleteSkeletonComponent {
  dynamicWidth = '100%';
  dynamicHeight = 100;
  currentShape: SkeletonType = 'Rectangle';
  currentEffect: ShimmerEffect = 'Wave';
  isVisible = true;
  dynamicClass = 'dynamic-skeleton';
}

Loading State Example

import { Component, OnInit } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';
import { NgIf } from '@angular/common';

@Component({
  imports: [SkeletonModule, NgIf],
  template: `
    <!-- Loading state -->
    <div *ngIf="isLoading" class="loading-container">
      <ejs-skeleton shape="Circle" width="50px" shimmerEffect="Wave"></ejs-skeleton>
      <div class="loading-content">
        <ejs-skeleton width="60%" height="14px"></ejs-skeleton>
        <ejs-skeleton width="40%" height="12px"></ejs-skeleton>
      </div>
    </div>
    
    <!-- Loaded state -->
    <div *ngIf="!isLoading" class="loaded-container">
      <img [src]="userData.avatar" alt="User">
      <div>
        <h3>{{ userData.name }}</h3>
        <p>{{ userData.bio }}</p>
      </div>
    </div>
  `
})
export class LoadingStateComponent implements OnInit {
  isLoading = true;
  userData = { avatar: '', name: '', bio: '' };
  
  ngOnInit() {
    // Simulate API call
    setTimeout(() => {
      this.userData = {
        avatar: 'assets/avatar.jpg',
        name: 'John Doe',
        bio: 'Software Developer'
      };
      this.isLoading = false;
    }, 2000);
  }
}

Getting Started with Skeleton Component

Table of Contents

• Prerequisites
• Installation
• Dependencies
• CSS Theme Import
• Basic Setup
• First Skeleton
• Running the Application

Prerequisites

Ensure your development environment meets the following requirements:

• Angular 19+ or compatible recent Angular versions
• Node.js and npm installed
• Angular CLI installed globally

For detailed Angular version compatibility, refer to the Angular version support matrix.

Note: Starting from Angular 19, standalone components are the default. This guide uses the modern standalone architecture.

Installation

Step 1: Install Angular CLI

If you don't have Angular CLI installed, install it globally:

npm install -g @angular/cli

To install a specific version:

npm install -g @angular/cli@21.0.0

Step 2: Create a New Angular Application

ng new syncfusion-skeleton-app

When prompted, choose your preferred settings:

• Stylesheet format: CSS (or SCSS if preferred)
• Server-side rendering: Select your preference
• AI tool: Optional based on your needs

Navigate to your project:

cd syncfusion-skeleton-app

Note: In Angular 19 and below, files use .component.ts suffixes. In Angular 20+, the CLI generates a simpler structure with src/app/app.ts, app.html, and app.css.

Step 3: Add Syncfusion Notifications Package

Install the Syncfusion Angular Notifications package which includes the Skeleton component:

ng add @syncfusion/ej2-angular-notifications

This command will automatically:

• Add @syncfusion/ej2-angular-notifications package and peer dependencies to package.json
• Import the Skeleton component in your application
• Register the default Material theme in angular.json

For ngcc compatibility (Angular 15 and below):

npm add @syncfusion/ej2-angular-notifications@32.1.19-ngcc

Note: Starting from Angular 16, ngcc support has been removed. The IVY format packages are required for Angular 16+.

Dependencies

The Skeleton component depends on the following packages:

@syncfusion/ej2-angular-notifications
└── @syncfusion/ej2-angular-base

These dependencies are automatically installed when you run ng add.

CSS Theme Import

Automatic Theme Setup

When you run ng add @syncfusion/ej2-angular-notifications, the Material theme is automatically added to your styles.css file.

Manual Theme Import

To import themes manually, add the following to your styles.css:

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-notifications/styles/material.css';

Available themes:

• material.css - Material Design theme (default)
• bootstrap5.css - Bootstrap 5 theme
• fabric.css - Fabric theme
• tailwind.css - Tailwind CSS theme

Theme import in correct order: 1. Base styles first (@syncfusion/ej2-base/styles/...) 2. Component styles second (@syncfusion/ej2-angular-notifications/styles/...)

Using SCSS

If your project uses SCSS, import themes as SCSS files:

@import '../node_modules/@syncfusion/ej2-base/styles/material.scss';
@import '../node_modules/@syncfusion/ej2-angular-notifications/styles/material.scss';

For detailed SCSS setup guide, refer to SCSS configuration.

Basic Setup

Update Your App Component

Modify src/app/app.ts (or src/app/app.component.ts for older Angular versions):

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <h1>Angular Skeleton Component</h1>
    <ejs-skeleton height="15px"></ejs-skeleton>
  `
})
export class AppComponent {}

Key points:

• Import SkeletonModule from @syncfusion/ej2-angular-notifications
• Set standalone: true for modern Angular architecture
• Add SkeletonModule to the imports array
• Use <ejs-skeleton> template tag in your template

Update Bootstrap

Your src/main.ts should look like this:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';

bootstrapApplication(AppComponent).catch((err) => console.error(err));

First Skeleton

Here's a complete example of your first Skeleton component:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';
import { Component } from '@angular/core';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'my-app',
  template: `<ejs-skeleton height='15px'></ejs-skeleton>`
})
export class AppComponent {}

Bootstrap the app:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';

bootstrapApplication(AppComponent).catch((err) => console.error(err));

Running the Application

Development Server

Run the development server:

ng serve

The application will be available at http://localhost:4200/. The page will automatically reload when you make changes to the source files.

Building for Production

Create a production build:

ng build

The optimized build will be stored in the dist/ folder.

Compilation Options

For faster development, use:

ng serve --poll

Or with a specific poll interval:

ng serve --poll=2000

Troubleshooting

Issue: Module not found error for SkeletonModule

• Ensure @syncfusion/ej2-angular-notifications is installed
• Run npm install if dependencies are missing
• Restart the dev server

Issue: Theme not applying

• Verify CSS import is in styles.css
• Check import order: base styles first, then component styles
• Clear browser cache and rebuild

Issue: Skeleton not rendering

• Verify SkeletonModule is in the imports array
• Check that you're using the <ejs-skeleton> tag with lowercase ejs-
• Ensure standalone: true is set in the component

Shapes in Skeleton Component

Table of Contents

• Overview
• Circle Shape
• Square Shape
• Rectangle Shape
• Text Shape
• Building Complex Layouts
• Responsive Shapes

Overview

The Skeleton component supports four built-in shape variants to design layouts of any page. Use the shape property to create previews of different content types. Each shape serves a specific purpose in your skeleton layout.

Available shapes:

• Text (default) - For text content and paragraphs
• Circle - For avatars and profile pictures
• Square - For small thumbnails and icons
• Rectangle - For images, cards, and large content blocks

Circle Shape

Circle shapes are ideal for displaying avatars, profile pictures, and thumbnail images.

Basic Circle Skeleton

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-circle-skeleton',
  template: `<ejs-skeleton shape="Circle" width="48px"></ejs-skeleton>`
})
export class CircleSkeletonComponent {}

Key points for Circle:

• Set width property to define diameter
• height is not needed (uses width for both dimensions)
• Commonly used sizes: 32px (small), 48px (medium), 64px (large)

Circle Sizes

// Small avatar (user in list)
<ejs-skeleton shape="Circle" width="32px"></ejs-skeleton>

// Medium avatar (card header)
<ejs-skeleton shape="Circle" width="48px"></ejs-skeleton>

// Large avatar (profile page)
<ejs-skeleton shape="Circle" width="80px"></ejs-skeleton>

Square Shape

Square shapes are ideal for thumbnails, icons, and small image placeholders.

Basic Square Skeleton

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-square-skeleton',
  template: `<ejs-skeleton shape="Square" width="48px"></ejs-skeleton>`
})
export class SquareSkeletonComponent {}

Key points for Square:

• Set width property to define dimensions
• height is not needed (uses width for both dimensions)
• Useful for icon placeholders and thumbnail grids

Square Sizes

// Small icon
<ejs-skeleton shape="Square" width="24px"></ejs-skeleton>

// Medium thumbnail
<ejs-skeleton shape="Square" width="48px"></ejs-skeleton>

// Large thumbnail
<ejs-skeleton shape="Square" width="100px"></ejs-skeleton>

Rectangle Shape

Rectangle shapes are perfect for images, cards, and large content blocks.

Basic Rectangle Skeleton

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-rectangle-skeleton',
  template: `<ejs-skeleton shape="Rectangle" width="50px" height="25px"></ejs-skeleton>`
})
export class RectangleSkeletonComponent {}

Key points for Rectangle:

• Requires both width and height properties
• Use percentage for responsive widths: width="100%"
• Common for banner images and content blocks

Rectangle Dimensions

// Horizontal banner (aspect ratio 16:9)
<ejs-skeleton shape="Rectangle" width="100%" height="225px"></ejs-skeleton>

// Square image
<ejs-skeleton shape="Rectangle" width="200px" height="200px"></ejs-skeleton>

// Vertical image (portrait)
<ejs-skeleton shape="Rectangle" width="150px" height="300px"></ejs-skeleton>

// Thumbnail
<ejs-skeleton shape="Rectangle" width="80px" height="80px"></ejs-skeleton>

Text Shape

Text shapes are used for text content, paragraphs, and paragraph lines.

Basic Text Skeleton

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-text-skeleton',
  template: `<ejs-skeleton shape="Text" width="50%" height="15px"></ejs-skeleton>`
})
export class TextSkeletonComponent {}

Key points for Text:

• Use percentage for width to make it flexible
• Set small height values (12-16px) to match text line height
• Default shape when no shape property is specified

Text Variations

// Full width paragraph
<ejs-skeleton width="100%" height="15px"></ejs-skeleton>

// Heading
<ejs-skeleton width="40%" height="20px"></ejs-skeleton>

// Partial paragraph (second line)
<ejs-skeleton width="75%" height="15px"></ejs-skeleton>

// Small text
<ejs-skeleton width="30%" height="12px"></ejs-skeleton>

Building Complex Layouts

Combine different shapes to create realistic skeleton layouts that match your actual content.

Profile Card Layout

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-profile-skeleton',
  template: `
    <div id="skeletonCard" class="profile-card">
      <!-- Avatar -->
      <div class="cardProfile">
        <ejs-skeleton id="cardProfile" shape="Circle" width="60px"></ejs-skeleton>
      </div>
      
      <!-- Profile Info -->
      <div class="cardinfo">
        <ejs-skeleton id="text1" width="30%" height="15px"></ejs-skeleton><br/>
        <ejs-skeleton id="text2" width="15%" height="15px"></ejs-skeleton>
      </div>
      
      <!-- Image -->
      <div class="cardContent">
        <ejs-skeleton id="cardImage" shape="Rectangle" width="100%" height="150px"></ejs-skeleton>
      </div>
      
      <!-- Actions -->
      <div class="cardoptions">
        <ejs-skeleton id="rightOption" shape="Rectangle" width="20%" height="32px"></ejs-skeleton>
        <ejs-skeleton id="leftOption" shape="Rectangle" width="20%" height="32px"></ejs-skeleton>
      </div>
    </div>
  `,
  styles: [`
    .profile-card { padding: 16px; }
    .cardProfile { margin-bottom: 12px; }
    .cardinfo { margin-bottom: 12px; }
    .cardContent { margin-bottom: 12px; }
    .cardoptions { display: flex; gap: 8px; }
  `]
})
export class ProfileSkeletonComponent {}

List Item Layout

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';
import { NgFor } from '@angular/common';

@Component({
  imports: [SkeletonModule, NgFor],
  standalone: true,
  selector: 'app-list-skeleton',
  template: `
    <div class="list-skeleton">
      <div class="list-item" *ngFor="let item of [1,2,3,4,5]">
        <div class="item-avatar">
          <ejs-skeleton shape="Circle" width="40px"></ejs-skeleton>
        </div>
        <div class="item-content">
          <ejs-skeleton width="60%" height="14px"></ejs-skeleton>
          <ejs-skeleton width="40%" height="12px"></ejs-skeleton>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .list-item { display: flex; gap: 12px; margin-bottom: 16px; }
    .item-avatar { flex-shrink: 0; }
    .item-content { flex: 1; }
  `]
})
export class ListSkeletonComponent {}

Article Header Layout

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-article-skeleton',
  template: `
    <div class="article-skeleton">
      <!-- Featured Image -->
      <ejs-skeleton shape="Rectangle" width="100%" height="300px"></ejs-skeleton>
      
      <!-- Title -->
      <div class="skeleton-spacing">
        <ejs-skeleton width="80%" height="24px"></ejs-skeleton>
      </div>
      
      <!-- Meta Info -->
      <div class="skeleton-spacing">
        <ejs-skeleton width="40%" height="12px"></ejs-skeleton>
      </div>
      
      <!-- Paragraph 1 -->
      <div class="skeleton-paragraph">
        <ejs-skeleton width="100%" height="12px"></ejs-skeleton>
        <ejs-skeleton width="100%" height="12px"></ejs-skeleton>
        <ejs-skeleton width="85%" height="12px"></ejs-skeleton>
      </div>
      
      <!-- Paragraph 2 -->
      <div class="skeleton-paragraph">
        <ejs-skeleton width="100%" height="12px"></ejs-skeleton>
        <ejs-skeleton width="100%" height="12px"></ejs-skeleton>
        <ejs-skeleton width="75%" height="12px"></ejs-skeleton>
      </div>
    </div>
  `,
  styles: [`
    .skeleton-spacing { margin: 12px 0; }
    .skeleton-paragraph { margin: 16px 0; }
    ejs-skeleton { display: block; margin-bottom: 4px; }
  `]
})
export class ArticleSkeletonComponent {}

Responsive Shapes

Use percentage-based widths to make shapes responsive to container changes.

Responsive Grid Layout

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';
import { NgFor } from '@angular/common';

@Component({
  imports: [SkeletonModule, NgFor],
  standalone: true,
  selector: 'app-responsive-grid',
  template: `
    <div class="grid-container">
      <div class="grid-item" *ngFor="let item of [1,2,3,4,5,6]">
        <!-- Square image -->
        <ejs-skeleton shape="Rectangle" width="100%" height="0" 
                      [style.paddingBottom]="'100%'"></ejs-skeleton>
        
        <!-- Title -->
        <div class="skeleton-content">
          <ejs-skeleton width="80%" height="16px"></ejs-skeleton>
          <ejs-skeleton width="60%" height="12px"></ejs-skeleton>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .grid-container { 
      display: grid; 
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
    }
    .grid-item { position: relative; }
    .skeleton-content { padding: 8px 0; }
  `]
})
export class ResponsiveGridComponent {}

Mobile-First Responsive

// Mobile: single column
<div class="skeleton-container" [ngClass]="{'mobile': isMobile}">
  <ejs-skeleton width="100%" height="200px"></ejs-skeleton>
</div>

// Desktop: adjust height
<ejs-skeleton width="100%" [height]="isDesktop ? '400px' : '200px'"></ejs-skeleton>

Getting Started — Syncfusion Angular Toast

Table of Contents

• Prerequisites and Dependencies
• Installation
• Adding CSS Themes
• Standalone Component Setup
• NgModule Setup
• Showing a Toast
• Running the Application

---

Prerequisites and Dependencies

Angular version: Angular 12+ (Ivy). Angular 19+ uses standalone components by default.

Package dependencies tree:

@syncfusion/ej2-angular-notifications
  ├── @syncfusion/ej2-angular-base
  └── @syncfusion/ej2-notifications
        ├── @syncfusion/ej2-base
        ├── @syncfusion/ej2-button
        └── @syncfusion/ej2-popups

---

Installation

The recommended installation method uses the Angular CLI ng add command, which automatically installs the package, registers components, and sets up the default Material3 theme:

ng add @syncfusion/ej2-angular-notifications

This command:

• Adds @syncfusion/ej2-angular-notifications and peer dependencies to package.json
• Registers the default Syncfusion Material3 theme in angular.json

Manual install (alternative):

npm install @syncfusion/ej2-angular-notifications

---

Adding CSS Themes

When using ng add, the Material3 theme is added automatically. For manual setup or custom themes, add the CSS imports to styles.css:

/* styles.css — import in dependency order */
@import '@syncfusion/ej2-base/styles/material3.css';
@import '@syncfusion/ej2-buttons/styles/material3.css';
@import '@syncfusion/ej2-popups/styles/material3.css';
@import '@syncfusion/ej2-angular-notifications/styles/material3.css';

Import order matters. Toast depends on base, buttons, and popups styles. Always import them in this sequence.

Available themes: material3, material3-dark, bootstrap5, bootstrap5-dark, tailwind, tailwind-dark, fluent, fluent-dark, fabric, highcontrast

Replace material3 with your chosen theme name for all four imports.

---

Standalone Component Setup

Angular 19+ uses standalone components by default. Import ToastModule directly into your component:

// src/app/app.ts
import { Component, ViewChild } from '@angular/core';
import { ToastModule, ToastComponent } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [ToastModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-toast #toast (created)="onCreated()">
      <ng-template #title>
        <div>Sample Toast Title</div>
      </ng-template>
      <ng-template #content>
        <div>Sample Toast Content</div>
      </ng-template>
    </ejs-toast>
  `
})
export class App {
  @ViewChild('toast') toast!: ToastComponent;

  onCreated(): void {
    this.toast.show();
  }
}

// src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app/app';
import 'zone.js';
bootstrapApplication(App).catch((err) => console.error(err));

---

NgModule Setup

For older Angular projects using NgModule:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ToastModule } from '@syncfusion/ej2-angular-notifications';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ToastModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

// app.component.ts
import { Component, ViewChild } from '@angular/core';
import { ToastComponent } from '@syncfusion/ej2-angular-notifications';

@Component({
  selector: 'app-root',
  template: `
    <ejs-toast #toast (created)="onCreated()">
      <ng-template #title><div>Hello</div></ng-template>
      <ng-template #content><div>Welcome to Syncfusion Toast</div></ng-template>
    </ejs-toast>
  `
})
export class AppComponent {
  @ViewChild('toast') toast!: ToastComponent;

  onCreated(): void {
    this.toast.show();
  }
}

---

Showing a Toast

The toast element must exist in the DOM before calling show(). The (created) event fires after the component initializes — this is the right place to auto-show a toast.

Show immediately on load:

(created)="toastObj.show()"

Show on user action (button click):

public showToast(): void {
  this.toast.show();
}

<button (click)="showToast()">Show Notification</button>
<ejs-toast #toast [title]="'Alert'" [content]="'Action completed.'"></ejs-toast>

Pass properties inline via `show()`:

this.toast.show({ title: 'Success', content: 'Record saved.', cssClass: 'e-toast-success' });

Hide all visible toasts:

this.toast.hide('All');

---

Running the Application

ng serve

Open http://localhost:4200 in your browser. The toast will appear briefly then auto-dismiss after 5 seconds (default timeOut).

Angular version note: Angular 20+ uses app.ts/app.html (no .component. suffix). Angular 19 and below uses app.component.ts/app.component.html. Both are functionally equivalent for Syncfusion components.

See Also

• Configuration — Title, content, close button, progress bar
• API Reference — Full property and method list