syncfusion-angular-notifications

What this skill does

# 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 (opac