Notification Feed - CometChat Docs

AI Integration Quick Reference

{
  "component": "CometChatNotificationFeedComponent",
  "package": "@cometchat/chat-uikit-angular",
  "selector": "cometchat-notification-feed",
  "import": "import { CometChatNotificationFeedComponent } from \"@cometchat/chat-uikit-angular\";",
  "description": "Full-screen notification feed with category filtering, timestamp grouping, card rendering via @cometchat/cards-angular, real-time updates, and automatic engagement reporting.",
  "cssRootClass": ".cometchat-notification-feed",
  "inputs": {
    "data": {
      "notificationFeedRequestBuilder": { "type": "CometChat.NotificationFeedRequestBuilder", "default": "SDK default (15 per page)" },
      "notificationCategoriesRequestBuilder": { "type": "CometChat.NotificationCategoriesRequestBuilder", "default": "SDK default" },
      "scrollToItemId": { "type": "string", "default": "undefined" }
    },
    "visibility": {
      "title": { "type": "string", "default": "localized \"Notifications\"" },
      "showHeader": { "type": "boolean", "default": true },
      "showBackButton": { "type": "boolean", "default": false },
      "showFilterChips": { "type": "boolean", "default": true }
    },
    "templates": {
      "headerView": "TemplateRef<any>",
      "emptyStateView": "TemplateRef<any>",
      "errorStateView": "TemplateRef<any>",
      "loadingStateView": "TemplateRef<any>"
    },
    "cards": {
      "cardThemeMode": { "type": "\"auto\" | \"light\" | \"dark\"", "default": "\"auto\"" },
      "cardThemeOverride": { "type": "Record<string, any>", "default": "undefined" }
    },
    "style": { "type": "CometChatNotificationFeedStyle", "default": "undefined" }
  },
  "outputs": {
    "itemClick": "EventEmitter<NotificationFeedItem>",
    "actionClick": "EventEmitter<{ item: NotificationFeedItem; action: CardAction }>",
    "error": "EventEmitter<CometChat.CometChatException>",
    "backClick": "EventEmitter<void>"
  },
  "automaticBehaviors": [
    "Real-time updates via addNotificationFeedListener",
    "Delivery reporting on fetch",
    "Read reporting on viewport visibility (IntersectionObserver)",
    "Unread count polling every 30 seconds",
    "Infinite scroll pagination",
    "Timestamp grouping (Today, Yesterday, day name, date)",
    "Category filter chips with unread badges"
  ]
}

CometChatNotificationFeedComponent displays a scrollable notification feed where each item is rendered as a card using @cometchat/cards-angular. It handles fetching, pagination, category filtering, timestamp grouping, real-time updates, and read/delivered/engagement reporting automatically.

Where It Fits

CometChatNotificationFeedComponent is a full-screen, standalone component. Drop it into a page or route. It manages its own data fetching, state, and real-time listeners — you just handle the navigation outputs.

import { Component } from "@angular/core";
import { CometChatNotificationFeedComponent } from "@cometchat/chat-uikit-angular";

@Component({
  selector: "app-notifications-page",
  standalone: true,
  imports: [CometChatNotificationFeedComponent],
  template: `
    <cometchat-notification-feed
      [showBackButton]="true"
      (backClick)="goBack()"
      (itemClick)="onItemClick($event)"
    ></cometchat-notification-feed>
  `,
})
export class NotificationsPageComponent {
  goBack(): void {
    history.back();
  }

  onItemClick(item: any): void {
    // Handle item click (e.g., open detail or deep link)
  }
}

Minimal Render

import { Component } from "@angular/core";
import { CometChatNotificationFeedComponent } from "@cometchat/chat-uikit-angular";

@Component({
  selector: "app-notifications-demo",
  standalone: true,
  imports: [CometChatNotificationFeedComponent],
  template: `
    <div style="width: 100%; height: 100vh;">
      <cometchat-notification-feed></cometchat-notification-feed>
    </div>
  `,
})
export class NotificationsDemoComponent {}

Prerequisites: CometChat SDK initialized with CometChatUIKit.init() and a user logged in. Root CSS class: .cometchat-notification-feed

Filtering Feed Items

Control what loads using a custom request builder:

import { Component } from "@angular/core";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatNotificationFeedComponent } from "@cometchat/chat-uikit-angular";

@Component({
  selector: "app-unread-notifications",
  standalone: true,
  imports: [CometChatNotificationFeedComponent],
  template: `
    <cometchat-notification-feed
      [notificationFeedRequestBuilder]="requestBuilder"
    ></cometchat-notification-feed>
  `,
})
export class UnreadNotificationsComponent {
  requestBuilder = new CometChat.NotificationFeedRequestBuilder()
    .setLimit(30)
    .setReadState("unread")
    .setCategory("promotions")
    .build();
}

Builder Method	Description
`.setLimit(number)`	Items per page (default 15)
`.setReadState(state)`	`"read"`, `"unread"`, or `"all"`
`.setCategory(string)`	Filter by category
`.setChannelId(string)`	Filter by channel
`.setTags(string[])`	Filter by tags
`.setDateFrom(string)`	ISO 8601 date lower bound
`.setDateTo(string)`	ISO 8601 date upper bound

Actions and Events

Outputs

itemClick

Fires when a feed item card is clicked. Emits the NotificationFeedItem.

<cometchat-notification-feed
  (itemClick)="onItemClick($event)"
></cometchat-notification-feed>

onItemClick(item: any): void {
  console.log("Item clicked:", item.getId());
}

actionClick

Fires when an interactive element (button, link) inside a card is clicked. Emits { item, action }, where action contains the action type, parameters, and the element ID that triggered it.

<cometchat-notification-feed
  (actionClick)="onActionClick($event)"
></cometchat-notification-feed>

onActionClick(event: { item: any; action: any }): void {
  const { type, params, elementId } = event.action;
  switch (type) {
    case "openUrl":
      window.open(params.url, "_blank");
      break;
    case "chatWithUser":
      // Navigate to chat with params.uid
      break;
    case "chatWithGroup":
      // Navigate to group chat with params.guid
      break;
  }
}

error

Fires when an internal error occurs (network failure, SDK exception). Emits a CometChat.CometChatException.

<cometchat-notification-feed
  (error)="onError($event)"
></cometchat-notification-feed>

backClick

Fires when the back button in the header is clicked. Emits void.

<cometchat-notification-feed
  [showBackButton]="true"
  (backClick)="goBack()"
></cometchat-notification-feed>

Automatic Behaviors

The component handles these automatically — no manual setup needed:

Behavior	Description
Real-time updates	New items appear at the top via `addNotificationFeedListener`
Delivery reporting	Items are reported as delivered when fetched (`markFeedItemAsDelivered`)
Read reporting	Items are reported as read when visible in the viewport (IntersectionObserver → `markFeedItemAsRead`)
Unread count polling	Polls the unread count every 30 seconds to update badges
Infinite scroll	Fetches the next page when scrolling near the bottom
Timestamp grouping	Groups items as “Today”, “Yesterday”, day name, or date
Category filtering	Filter chips row with per-category unread badges

Customization

Template Slots

Replace individual regions with your own ng-template. Bind the template reference to the matching input:

<cometchat-notification-feed
  [headerView]="header"
  [emptyStateView]="empty"
  [loadingStateView]="loading"
  [errorStateView]="errorTpl"
></cometchat-notification-feed>

<ng-template #header>
  <!-- custom header -->
</ng-template>
<ng-template #empty>
  <!-- custom empty state -->
</ng-template>
<ng-template #loading>
  <!-- custom loading state -->
</ng-template>
<ng-template #errorTpl>
  <!-- custom error state -->
</ng-template>

Input	Type	Replaces
`headerView`	`TemplateRef<any>`	Entire header bar
`loadingStateView`	`TemplateRef<any>`	Loading state
`emptyStateView`	`TemplateRef<any>`	Empty state
`errorStateView`	`TemplateRef<any>`	Error state

Style Input

Pass a CometChatNotificationFeedStyle object to override colors, fonts, and dimensions without writing CSS:

import { CometChatNotificationFeedStyle } from "@cometchat/chat-uikit-angular";

feedStyle: CometChatNotificationFeedStyle = {
  backgroundColor: "#1a1a2e",
  headerTitleColor: "#ffffff",
  chipActiveBackgroundColor: "#6852d6",
  cardBorderRadius: "12px",
};

<cometchat-notification-feed [style]="feedStyle"></cometchat-notification-feed>

Field	Type
`backgroundColor`	`string`
`width` / `height`	`string`
`headerTitleColor` / `headerTitleFont`	`string`
`chipActiveBackgroundColor` / `chipActiveTextColor`	`string`
`chipInactiveBackgroundColor` / `chipInactiveTextColor`	`string`
`chipBorderColor`	`string`
`badgeBackgroundColor` / `badgeTextColor`	`string`
`separatorColor`	`string`
`timestampTextColor` / `timestampFont`	`string`
`cardBackgroundColor` / `cardBorderColor` / `cardBorderRadius` / `cardBorderWidth`	`string`
`unreadIndicatorColor`	`string`

CSS Styling

Override design tokens on the component selector:

cometchat-notification-feed {
  --cometchat-background-color-01: #1a1a2e;
  --cometchat-text-color-primary: #ffffff;
}

CSS Classes

Class	Description
`.cometchat-notification-feed`	Root container
`.cometchat-notification-feed__header`	Header bar
`.cometchat-notification-feed__header-title`	Header title text
`.cometchat-notification-feed__header-back`	Back button
`.cometchat-notification-feed__chips`	Filter chips container
`.cometchat-notification-feed__chip`	Individual filter chip
`.cometchat-notification-feed__chip--active`	Active filter chip
`.cometchat-notification-feed__chip--inactive`	Inactive filter chip
`.cometchat-notification-feed__chip-badge`	Chip unread badge
`.cometchat-notification-feed__content`	Scrollable content area
`.cometchat-notification-feed__item`	Feed item container
`.cometchat-notification-feed__item--unread`	Unread feed item
`.cometchat-notification-feed__unread-indicator`	Unread dot indicator
`.cometchat-notification-feed__item-meta`	Item metadata row (category + time)
`.cometchat-notification-feed__card-container`	Card wrapper
`.cometchat-notification-feed__loading`	Loading state
`.cometchat-notification-feed__empty`	Empty state
`.cometchat-notification-feed__error`	Error state

Inputs

All inputs are optional.

Input	Type	Default	Description
`title`	`string`	localized `"Notifications"`	Header title text
`showHeader`	`boolean`	`true`	Shows/hides the entire header
`showBackButton`	`boolean`	`false`	Shows/hides the back button in the header
`showFilterChips`	`boolean`	`true`	Shows/hides the category filter chips row
`scrollToItemId`	`string`	`undefined`	Deep link: scroll to a specific item by ID on load
`notificationFeedRequestBuilder`	`CometChat.NotificationFeedRequestBuilder`	SDK default	Custom request builder for fetching feed items
`notificationCategoriesRequestBuilder`	`CometChat.NotificationCategoriesRequestBuilder`	SDK default	Custom request builder for fetching categories
`headerView`	`TemplateRef<any>`	Built-in header	Custom header template
`emptyStateView`	`TemplateRef<any>`	Built-in empty state	Custom empty state template
`errorStateView`	`TemplateRef<any>`	Built-in error state	Custom error state template
`loadingStateView`	`TemplateRef<any>`	Built-in loading state	Custom loading state template
`style`	`CometChatNotificationFeedStyle`	`undefined`	Structured style overrides
`cardThemeMode`	`"auto" \| "light" \| "dark"`	`"auto"`	Theme mode forwarded to `@cometchat/cards-angular`
`cardThemeOverride`	`Record<string, any>`	`undefined`	Theme override forwarded to `@cometchat/cards-angular`

Outputs

Output	Payload	Description
`itemClick`	`NotificationFeedItem`	A feed item card was clicked
`actionClick`	`{ item: NotificationFeedItem; action: CardAction }`	An interactive element inside a card was clicked
`error`	`CometChat.CometChatException`	The component encountered an error
`backClick`	`void`	The back button was pressed

The CardAction object contains:

type — Action type (e.g., "openUrl", "chatWithUser")
params — Action parameters (e.g., { url: "..." }, { uid: "..." })
elementId — ID of the element that triggered the action
cardJson — The raw card JSON the action originated from

Common Patterns

Show only unread items

requestBuilder = new CometChat.NotificationFeedRequestBuilder()
  .setReadState("unread")
  .build();

<cometchat-notification-feed
  [notificationFeedRequestBuilder]="requestBuilder"
></cometchat-notification-feed>

Hide filter chips and header

<cometchat-notification-feed
  [showHeader]="false"
  [showFilterChips]="false"
></cometchat-notification-feed>

<div style="width: 400px; height: 100vh; border-left: 1px solid #E0E0E0;">
  <cometchat-notification-feed
    title="Updates"
    [showBackButton]="false"
  ></cometchat-notification-feed>
</div>

Deep link to a specific notification

<cometchat-notification-feed
  [scrollToItemId]="announcementId"
></cometchat-notification-feed>

Next Steps

Campaigns Feature

Overview of how campaigns work end-to-end

SDK Campaigns API

Low-level SDK APIs for feed items, categories, and engagement

Theming

Customize colors, fonts, and appearance

Components

Browse all prebuilt UI components

​Where It Fits

​Minimal Render

​Filtering Feed Items

​Filter Options

​Actions and Events

​Outputs

​itemClick

​actionClick

​error

​backClick

​Automatic Behaviors

​Customization

​Template Slots

​Style Input

​CSS Styling

​CSS Classes

​Inputs

​Outputs

​Common Patterns

​Show only unread items

​Hide filter chips and header

​Embed in a sidebar

​Deep link to a specific notification

​Next Steps

Campaigns Feature

SDK Campaigns API

Theming

Components

Where It Fits

Minimal Render

Filtering Feed Items

Filter Options

Actions and Events

Outputs

itemClick

actionClick

error

backClick

Automatic Behaviors

Customization

Template Slots

Style Input

CSS Styling

CSS Classes

Inputs

Outputs

Common Patterns

Show only unread items

Hide filter chips and header

Embed in a sidebar

Deep link to a specific notification

Next Steps