> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# CometChat Templates Service

> SDK-wide template customization service for all list components

<Accordion title="AI Integration Quick Reference">
  | Field | Value |
  | - | - |
  | Purpose | DI alternative to `*View` inputs — set a template once app-wide instead of passing it to every instance. NOT a custom-message-type registry. |
  | Class | `CometChatTemplatesService` |
  | Package | `@cometchat/chat-uikit-angular` v5.x |
  | Import | `import { CometChatTemplatesService } from "@cometchat/chat-uikit-angular";` |
  | Injected with | `private svc = inject(CometChatTemplatesService);` — `providedIn: 'root'`, no module wiring |
  | Key methods | `setSharedTemplates` · `getSharedTemplates` · `clearSharedTemplates` · `setConversationItemTemplate` · `setConversationLeadingTemplate` · `setConversationTitleTemplate` … +29 |
  | Reactive state (signals) | `sharedTemplates` · `conversationTemplates` · `userTemplates` · `groupTemplates` · `groupMemberTemplates` · `callLogTemplates` … +3 — use directly in templates, no subscription |
  | Reactive state (observables) | `sharedTemplates$` · `conversationTemplates$` · `userTemplates$` · `groupTemplates$` · `groupMemberTemplates$` · `callLogTemplates$` … +3 — `takeUntil(destroy$)` in `ngOnDestroy` |
  | Full API | See [Methods](#methods) |
  | Usage | See [Usage Examples](#usage-examples) |
  | Related | [Services overview](/ui-kit/angular/api-reference/introduction) · [LLM index](/ui-kit/angular/llms-angular-v5) |
</Accordion>

The `CometChatTemplatesService` provides centralized template customization across all CometChat list components. Register templates once and have them apply to conversations, users, groups, group members, call logs, and message list components.

## Import

```typescript theme={null}
import { CometChatTemplatesService } from '@cometchat/chat-uikit-angular';
```

## Template Priority

Templates are resolved in the following order (highest to lowest):

1. Component `@Input` (e.g. `[loadingView]="myTemplate"`)
2. Component-specific service templates (e.g. `setUserTemplates()`)
3. Shared service templates (`setSharedTemplates()`)
4. Component default

## Shared Templates

Use `setSharedTemplates()` to set loading, empty, or error templates that apply to **all** list components at once. This is the simplest way to brand every list in your app with a single call.

### SharedListTemplates Interface

```typescript theme={null}
interface SharedListTemplates {
  loadingView?: TemplateRef<void>;
  emptyView?: TemplateRef<void>;
  errorView?: TemplateRef<{ $implicit: Error }>;
}
```

### Example: Override Loading State for All Lists

```typescript expandable theme={null}
import { Component, ViewChild, TemplateRef, AfterViewInit, inject } from '@angular/core';
import { CometChatTemplatesService } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-chat-root',
  template: `
    <!-- Define a branded loading spinner -->
    <ng-template #brandedLoading>
      <div class="my-loading">
        <div class="my-spinner"></div>
        <p>Loading...</p>
      </div>
    </ng-template>

    <!-- All these lists will use the branded spinner -->
    <cometchat-conversations></cometchat-conversations>
    <cometchat-users></cometchat-users>
    <cometchat-groups></cometchat-groups>
  `
})
export class ChatRootComponent implements AfterViewInit {
  @ViewChild('brandedLoading', { static: true }) brandedLoading!: TemplateRef<void>;
  private templatesService = inject(CometChatTemplatesService);

  ngAfterViewInit(): void {
    this.templatesService.setSharedTemplates({
      loadingView: this.brandedLoading,
    });
  }
}
```

## Component-Specific Templates

Each list component has its own typed template interface. Component-specific templates take priority over shared templates.

### ConversationTemplates

```typescript expandable theme={null}
interface ConversationTemplates {
  itemView?: TemplateRef<any>;
  leadingView?: TemplateRef<any>;
  titleView?: TemplateRef<any>;
  subtitleView?: TemplateRef<any>;
  trailingView?: TemplateRef<any>;
  loadingView?: TemplateRef<void>;
  emptyView?: TemplateRef<void>;
  errorView?: TemplateRef<{ $implicit: Error }>;
}
```

### UserTemplates

```typescript expandable theme={null}
interface UserTemplates {
  itemView?: TemplateRef<any>;
  leadingView?: TemplateRef<any>;
  titleView?: TemplateRef<any>;
  subtitleView?: TemplateRef<any>;
  trailingView?: TemplateRef<any>;
  loadingView?: TemplateRef<void>;
  emptyView?: TemplateRef<void>;
  errorView?: TemplateRef<{ $implicit: Error }>;
}
```

### GroupTemplates

```typescript expandable theme={null}
interface GroupTemplates {
  itemView?: TemplateRef<any>;
  leadingView?: TemplateRef<any>;
  titleView?: TemplateRef<any>;
  subtitleView?: TemplateRef<any>;
  trailingView?: TemplateRef<any>;
  loadingView?: TemplateRef<void>;
  emptyView?: TemplateRef<void>;
  errorView?: TemplateRef<{ $implicit: Error }>;
}
```

### GroupMemberTemplates

```typescript expandable theme={null}
interface GroupMemberTemplates {
  itemView?: TemplateRef<any>;
  leadingView?: TemplateRef<any>;
  titleView?: TemplateRef<any>;
  subtitleView?: TemplateRef<any>;
  trailingView?: TemplateRef<any>;
  loadingView?: TemplateRef<void>;
  emptyView?: TemplateRef<void>;
  errorView?: TemplateRef<{ $implicit: Error }>;
}
```

### CallLogTemplates

```typescript expandable theme={null}
interface CallLogTemplates {
  itemView?: TemplateRef<any>;
  leadingView?: TemplateRef<any>;
  titleView?: TemplateRef<any>;
  subtitleView?: TemplateRef<any>;
  trailingView?: TemplateRef<any>;
  loadingView?: TemplateRef<void>;
  emptyView?: TemplateRef<void>;
  errorView?: TemplateRef<{ $implicit: Error }>;
}
```

### MessageListTemplates

```typescript theme={null}
interface MessageListTemplates {
  loadingView?: TemplateRef<void>;
  emptyView?: TemplateRef<void>;
  errorView?: TemplateRef<{ $implicit: Error }>;
  headerView?: TemplateRef<any>;
  footerView?: TemplateRef<any>;
}
```

## Methods

### Shared Template Methods

| Method | Description |
| - | - |
| `setSharedTemplates(templates)` | Set templates that apply to all list components as a fallback |
| `getSharedTemplates()` | Get the current shared templates |
| `clearSharedTemplates()` | Clear all shared templates |

### Conversation Template Methods

| Method | Description |
| - | - |
| `setConversationTemplates(templates)` | Set multiple conversation templates at once |
| `setConversationItemTemplate(template)` | Set template for the entire conversation item |
| `setConversationLeadingTemplate(template)` | Set template for the leading section |
| `setConversationTitleTemplate(template)` | Set template for the title section |
| `setConversationSubtitleTemplate(template)` | Set template for the subtitle section |
| `setConversationTrailingTemplate(template)` | Set template for the trailing section |
| `setConversationLoadingTemplate(template)` | Set template for the loading state |
| `setConversationEmptyTemplate(template)` | Set template for the empty state |
| `setConversationErrorTemplate(template)` | Set template for the error state |
| `getConversationTemplates()` | Get the current conversation templates |
| `clearConversationTemplates()` | Clear all conversation templates |

### User Template Methods

| Method | Description |
| - | - |
| `setUserTemplates(templates)` | Set multiple user templates at once |
| `getUserTemplates()` | Get the current user templates |
| `clearUserTemplates()` | Clear all user templates |

### Group Template Methods

| Method | Description |
| - | - |
| `setGroupTemplates(templates)` | Set multiple group templates at once |
| `getGroupTemplates()` | Get the current group templates |
| `clearGroupTemplates()` | Clear all group templates |

### Group Member Template Methods

| Method | Description |
| - | - |
| `setGroupMemberTemplates(templates)` | Set multiple group member templates at once |
| `getGroupMemberTemplates()` | Get the current group member templates |
| `clearGroupMemberTemplates()` | Clear all group member templates |

### Call Log Template Methods

| Method | Description |
| - | - |
| `setCallLogTemplates(templates)` | Set multiple call log templates at once |
| `getCallLogTemplates()` | Get the current call log templates |
| `clearCallLogTemplates()` | Clear all call log templates |

### Message List Template Methods

| Method | Description |
| - | - |
| `setMessageListTemplates(templates)` | Set multiple message list templates at once |
| `getMessageListTemplates()` | Get the current message list templates |
| `clearMessageListTemplates()` | Clear all message list templates |

### Bulk Operations

| Method | Description |
| - | - |
| `clearAllTemplates()` | Clear all templates (shared + all component-specific) |

### Resolved Template Helper

| Method | Description |
| - | - |
| `resolveTemplate(componentTemplates, slot)` | Resolves a template using the priority chain: component-specific > shared > undefined. Used internally by components. |

## Usage Examples

### Shared Loading + Component-Specific Override

```typescript expandable theme={null}
@Component({
  template: `
    <ng-template #sharedLoading>
      <my-branded-spinner></my-branded-spinner>
    </ng-template>

    <ng-template #usersEmpty>
      <div>No users found. Try a different search.</div>
    </ng-template>

    <cometchat-conversations></cometchat-conversations>
    <cometchat-users></cometchat-users>
    <cometchat-groups></cometchat-groups>
  `
})
export class AppComponent implements AfterViewInit {
  @ViewChild('sharedLoading', { static: true }) sharedLoading!: TemplateRef<void>;
  @ViewChild('usersEmpty', { static: true }) usersEmpty!: TemplateRef<void>;
  private templatesService = inject(CometChatTemplatesService);

  ngAfterViewInit(): void {
    // All lists get the branded spinner
    this.templatesService.setSharedTemplates({
      loadingView: this.sharedLoading,
    });

    // Users list gets a custom empty state (overrides shared)
    this.templatesService.setUserTemplates({
      emptyView: this.usersEmpty,
    });
  }
}
```

### Scoping for Multiple Instances

By default, `CometChatTemplatesService` is a singleton (`providedIn: 'root'`). If you need different templates for different parts of your app, scope it via a wrapper component:

```typescript expandable theme={null}
@Component({
  selector: 'app-secondary-panel',
  providers: [CometChatTemplatesService], // Scoped instance
  template: `
    <ng-template #altLoading>
      <div>Loading secondary panel...</div>
    </ng-template>
    <cometchat-users></cometchat-users>
  `
})
export class SecondaryPanelComponent implements AfterViewInit {
  @ViewChild('altLoading', { static: true }) altLoading!: TemplateRef<void>;
  private templatesService = inject(CometChatTemplatesService);

  ngAfterViewInit(): void {
    // Only affects components inside this wrapper
    this.templatesService.setSharedTemplates({
      loadingView: this.altLoading,
    });
  }
}
```

### Clearing Templates at Runtime

```typescript theme={null}
// Clear just the shared templates (components fall back to defaults)
this.templatesService.clearSharedTemplates();

// Clear everything at once
this.templatesService.clearAllTemplates();
```

## Reactive Access

Each template section exposes both a signal and an Observable for reactive consumption:

| Signal (synchronous) | Observable (RxJS) |
| - | - |
| `sharedTemplates()` | `sharedTemplates$` |
| `conversationTemplates()` | `conversationTemplates$` |
| `userTemplates()` | `userTemplates$` |
| `groupTemplates()` | `groupTemplates$` |
| `groupMemberTemplates()` | `groupMemberTemplates$` |
| `callLogTemplates()` | `callLogTemplates$` |
| `messageListTemplates()` | `messageListTemplates$` |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.