@cometchat/cards-angular

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.