Services

This section documents the Angular services provided by the CometChat UIKit. These are injectable services you use via Angular’s dependency injection to manage state, configure components, and customize behavior.

Core Classes

CometChatUIKit

The main entry point for initializing and configuring the UIKit.

class CometChatUIKit {
  static init(settings: UIKitSettings): Promise<void>;
  static login(uid: string): Promise<CometChat.User>;
  static loginWithAuthToken(authToken: string): Promise<CometChat.User>;
  static logout(): Promise<void>;
  /** Synchronous — returns the in-memory cached user or null. No SDK call. */
  static getLoggedInUser(): CometChat.User | null;
  /** Async — verifies the SDK session and returns the user or null. */
  static getLoggedinUser(): Promise<CometChat.User | null>;
  static createUser(user: CometChat.User): Promise<CometChat.User>;
  /** Returns whether calling was enabled via UIKitSettingsBuilder.setCallingEnabled(true). */
  static isCallingEnabled(): boolean;
}

The UIKit exposes two session-check methods with intentionally different casing — this mirrors the underlying CometChat SDK naming.

getLoggedInUser() (capital I, synchronous) — returns the in-memory cached user immediately. Use this for quick checks inside components where you already know the user is logged in.
getLoggedinUser() (lowercase i, async) — makes an SDK call to verify the session. Use this in ngOnInit or main.ts before rendering components, as it is the authoritative check.

The casing difference is not a typo — it is intentional to match the SDK’s own API surface.

UIKitSettings

Build settings using UIKitSettingsBuilder:

const uiKitSettings = new UIKitSettingsBuilder()
  .setAppId('APP_ID')
  .setRegion('REGION')
  .setAuthKey('AUTH_KEY') // dev only — use Auth Token in production
  .subscribePresenceForAllUsers()
  .setCallingEnabled(true) // enable voice/video calling (default: false)
  .build();

UIKitSettingsBuilder Methods

Method	Type	Default	Description
`setAppId(appId)`	`string`	—	Your CometChat App ID (required)
`setRegion(region)`	`string`	—	Your CometChat region, e.g. `'us'`, `'eu'`, `'in'` (required)
`setAuthKey(authKey)`	`string`	—	Auth Key for development. Use Auth Token in production
`subscribePresenceForAllUsers()`	—	—	Subscribe to presence updates for all users
`subscribePresenceForFriends()`	—	—	Subscribe to presence updates for friends only
`subscribePresenceForRoles(roles)`	`string[]`	—	Subscribe to presence updates for specific roles
`setAutoEstablishSocketConnection(auto)`	`boolean`	`true`	Auto-establish WebSocket connection on init
`setCallingEnabled(enabled)`	`boolean`	`false`	Enable voice/video calling. When `true`, the Calls SDK is initialized after login and call buttons become visible in MessageHeader, CallButtons, and CallLogs. When `false` (default), call buttons are hidden and the Calls SDK is not initialized
`setCallAppSettings(settings)`	`any`	—	Custom `CallAppSettings` for the Calls SDK. Built via `CometChatUIKitCalls.CallAppSettingsBuilder`. If not set, the UIKit builds default settings from `appId` and `region`
`setStorageMode(mode)`	`CometChat.StorageMode`	`LOCAL`	Storage mode for the SDK
`setAdminHost(host)`	`string`	—	Override the admin host URL
`setClientHost(host)`	`string`	—	Override the client host URL

setCallingEnabled(true) requires @cometchat/calls-sdk-javascript to be installed. Without the Calls SDK package, calling features will not activate even when enabled.

Documented Services

Service	Description	Reference
ChatStateService	Centralized chat state management service — tracks active user, group, and conversation across components	ChatStateService
MessageBubbleConfigService	Centralized message bubble view configuration — customize bubble parts globally or per message type	MessageBubbleConfigService
CometChatTemplatesService	SDK-wide template customization service — shared and component-specific templates for all list components	CometChatTemplatesService
FormatterConfigService	Text formatter configuration service — manages text formatting rules and custom formatters	FormatterConfigService
RichTextEditorService	Rich text editor configuration service — controls editor behavior, toolbar options, and input modes	RichTextEditorService
GlobalConfig	Centralized configuration via `COMETCHAT_GLOBAL_CONFIG` injection token — sets defaults for display, sound, calls, and more across all components	GlobalConfig

Service Scoping (Multiple Instances)

Most customization services (MessageBubbleConfigService, FormatterConfigService, CometChatTemplatesService, RichTextEditorService) are provided at the root level as singletons. This means all component instances share the same configuration by default. If you need different configurations for different component instances (e.g., a main chat panel and a thread panel with different bubble styles), you can scope a service to a wrapper component by adding it to the component’s providers array. Angular’s hierarchical dependency injection will give that component and its children their own service instance.

@Component({
  selector: 'app-thread-panel',
  providers: [MessageBubbleConfigService], // Scoped instance for this subtree
  template: `<cometchat-message-list ...></cometchat-message-list>`
})
export class ThreadPanelComponent { }

See the State Management Guide — Scoping Customization Services and CometChatMessageList — Multiple Message Lists for complete examples.

Do not scope ChatStateService — it is intentionally a singleton that tracks the app-wide active conversation. Use the props-based pattern ([user], [group]) for independent panels instead.

CometChatMessageEvents

Subscribe to message-related events.

CometChatMessageEvents.ccMessageSent.subscribe(({ message, status }) => {
  // `status` reflects the send lifecycle: inprogress, success, or error.
  console.log('Message sent:', message, status);
});

CometChatMessageEvents.onTextMessageReceived.subscribe((message) => {
  console.log('Message received:', message);
});

CometChatUserEvents

Subscribe to user-related events.

CometChatUserEvents.ccUserBlocked.subscribe((user) => {
  console.log('User blocked:', user);
});

CometChatUserEvents.ccUserUnblocked.subscribe((user) => {
  console.log('User unblocked:', user);
});

See the full Events reference for all available event names.

Type Definitions

All types are exported from the main package:

import type {
  CometChatTheme,
  SelectionMode,
  MessageStatus
} from '@cometchat/chat-uikit-angular';

​Core Classes

​CometChatUIKit

​UIKitSettings

​UIKitSettingsBuilder Methods

​Services

​Documented Services

​Service Scoping (Multiple Instances)

​CometChatMessageEvents

​CometChatUserEvents

​Type Definitions

Core Classes

CometChatUIKit

UIKitSettings

UIKitSettingsBuilder Methods

Services

Documented Services

Service Scoping (Multiple Instances)

CometChatMessageEvents

CometChatUserEvents

Type Definitions