CometChat Card Renderer Angular

An Angular component for rendering CometChat Card Schema JSON. This is a thin wrapper around @cometchat/cards that mounts the vanilla DOM output into an Angular component with full lifecycle management.

What it does

• Renders Card Schema JSON as a native Angular component
• Reactively re-renders on input changes (cardJson, themeMode, themeOverride, logLevel)
• Automatically cleans up DOM and theme observers on destroy
• Emits clicks on buttons, icon buttons, and links to your callback as typed CometChatCardActionEvents

The package is a pure renderer. It doesn't talk to the CometChat SDK, doesn't manage message lifecycle, and doesn't know about your app's routing. You decide what each action does.

Installation

npm install @cometchat/cards-angular

@cometchat/cards-angular includes @cometchat/cards as a dependency — no need to install both.

Peer Dependencies

• @angular/core >= 17.0.0
• @angular/common >= 17.0.0

Usage

import { CometChatCardViewComponent } from '@cometchat/cards-angular';
import type { CometChatCardActionEvent } from '@cometchat/cards-angular';

@Component({
  selector: 'app-card-message',
  standalone: true,
  imports: [CometChatCardViewComponent],
  template: `
    <cometchat-card-view
      [cardJson]="cardJson"
      [themeMode]="'auto'"
      (action)="handleAction($event)">
    </cometchat-card-view>
  `
})
export class CardMessageComponent {
  cardJson = '{...}';

  handleAction(event: CometChatCardActionEvent) {
    console.log('action:', event.action.type, 'from', event.elementId);
  }
}

API

Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | cardJson | string | '' | Card Schema JSON string (required) | | themeMode | 'auto' \| 'light' \| 'dark' | 'auto' | Color mode | | themeOverride | CometChatCardThemeOverride | — | Partial theme overrides | | logLevel | 'none' \| 'error' \| 'warning' \| 'verbose' | 'warning' | Console log verbosity |

Outputs

| Output | Type | Description | |--------|------|-------------| | action | EventEmitter<CometChatCardActionEvent> | Emits when user clicks a button, iconButton, or link | | containerStyle | EventEmitter<CometChatCardContainerStyle> | Emits resolved container style for parent layout |

Getting Started

Refer to the Integration Steps to integrate the angular cards into your app.

Prerequisites

• Node.js >= 18.0.0
• npm >= 9
• Angular >= 17.0.0

Help and Support

For integration issues, create a support ticket or seek real-time support via the CometChat Dashboard.