> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Notification Feed

> Full-screen notification feed component with category filtering, card rendering, real-time updates, and engagement reporting.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "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"
    ]
  }
  ```
</Accordion>

`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.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/XVuiTf1_iMM9sy8y/images/campaigns-overview-web.png?fit=max&auto=format&n=XVuiTf1_iMM9sy8y&q=85&s=85ec5cddd0e9685d947027b003a3d9f7" width="2880" height="1600" data-path="images/campaigns-overview-web.png" />
</Frame>

***

## 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.

```typescript theme={null}
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

```typescript theme={null}
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:

```typescript theme={null}
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();
}
```

### Filter Options

| 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`.

```html theme={null}
<cometchat-notification-feed
  (itemClick)="onItemClick($event)"
></cometchat-notification-feed>
```

```typescript theme={null}
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.

```html theme={null}
<cometchat-notification-feed
  (actionClick)="onActionClick($event)"
></cometchat-notification-feed>
```

```typescript theme={null}
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`.

```html theme={null}
<cometchat-notification-feed
  (error)="onError($event)"
></cometchat-notification-feed>
```

#### backClick

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

```html theme={null}
<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:

```html theme={null}
<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:

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

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

```html theme={null}
<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:

```css theme={null}
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

```typescript theme={null}
requestBuilder = new CometChat.NotificationFeedRequestBuilder()
  .setReadState("unread")
  .build();
```

```html theme={null}
<cometchat-notification-feed
  [notificationFeedRequestBuilder]="requestBuilder"
></cometchat-notification-feed>
```

### Hide filter chips and header

```html theme={null}
<cometchat-notification-feed
  [showHeader]="false"
  [showFilterChips]="false"
></cometchat-notification-feed>
```

### Embed in a sidebar

```html theme={null}
<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

```html theme={null}
<cometchat-notification-feed
  [scrollToItemId]="announcementId"
></cometchat-notification-feed>
```

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Campaigns Feature" icon="bullhorn" href="/ui-kit/angular/campaigns">
    Overview of how campaigns work end-to-end
  </Card>

  <Card title="SDK Campaigns API" icon="code" href="/sdk/javascript/campaigns">
    Low-level SDK APIs for feed items, categories, and engagement
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/angular/customization/theming">
    Customize colors, fonts, and appearance
  </Card>

  <Card title="Components" icon="grid-2" href="/ui-kit/angular/components/components-overview">
    Browse all prebuilt UI components
  </Card>
</CardGroup>