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](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](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](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](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](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](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](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 ```bash ng add @syncfusion/ej2-angular-notifications ``` ```css /* 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'; ``` ```typescript 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 ```typescript 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 ```typescript 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 ```typescript 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 | Property | Type | Default | Purpose | |----------|------|---------|---------| | `content` | `string \| object` | `null` | Text, HTML, or template content to display | | `severity` | `string` | `'Normal'` | Severity type: Normal, Success, Info, Warning, Error | | `variant` | `string` | `'Text'` | Visual style: Text, Outlined, Filled | | `showIcon` | `boolean` | `true` | Show/hide the severity icon | | `showCloseIcon` | `boolean` | `false` | Show/hide the close icon | | `visible` | `boolean` | `true` | Show or hide the entire message | | `cssClass` | `string` | `''` | Custom CSS class(es) appended to root element | | `enableRtl` | `boolean` | `false` | Right-to-left rendering | | `enablePersistence` | `boolean` | `false` | Persist component state across page reloads | | `locale` | `string` | `''` | Override global culture/localization | --- ## 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](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](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](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](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](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](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 ```typescript 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: ```typescript @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: ```typescript @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: ```typescript