# ChannelHeaderComponent

The `ChannelHeader` component displays the avatar and name of the currently active channel along with member and watcher information. You can read about [the difference between members and watchers](/chat/docs/javascript/creating_channels/#watchers-vs-members/) in the platform documentation. Please note that number of watchers is only displayed if the user has [`connect-events` capability](/chat/docs/javascript/chat_permission_policies/)

**Example 1** - Channel header:

![Channel Header Screenshot](@chat-sdk/angular/v7-latest/_assets/channel-header-screenshot.png)

## Basic usage

```html
<my-channel>
  <stream-channel-header></stream-channel-header>
</my-channel>
```

## Customization

### Channel information

You can provide your own template for displaying channel information using the [`CustomTemplatesService`](/chat/docs/sdk/angular/services/CustomTemplatesService/#channelheaderinfotemplate/)

### Channel actions

By default no channel action is displayed, but it's possible to [add action buttons to the channel header](/chat/docs/sdk/angular/services/CustomTemplatesService#channelactionstemplate/) component. You can follow our [code example](/chat/docs/sdk/angular/code-examples/channel-invites/) that implements the invite action (you can implement other kind of actions as well, for example edit).

### Menu button

You can provide a menu button template to the channel header, the [responsive layout guide](/chat/docs/sdk/angular/code-examples/responsive-layout/) shows how you can use this to toggle the channel list on mobile screens.

[//]: # "Start of generated content"
[//]: # "End of generated content"


---

This page was last updated at 2026-05-13T13:38:40.164Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/components/ChannelHeaderComponent/](https://getstream.io/chat/docs/sdk/angular/components/ChannelHeaderComponent/).