# ChannelHeaderComponent

> **Info:** This is documentation for **Stream Chat Angular SDK v7**, which is no longer actively maintained. For up-to-date documentation, see the [latest version (v8)](https://getstream.io/chat/docs/sdk/angular/).

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](https://getstream.io/chat/docs/javascript/creating-channels/#watching-channels) in the platform documentation. Please note that number of watchers is only displayed if the user has [`connect-events` capability](https://getstream.io/chat/docs/node/chat-permission-policies/)

**Example 1** - Channel header:

![Channel Header Screenshot](https://getstream.io/docs-assets/images/dd37a67d9b8c.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`](https://getstream.io/chat/docs/sdk/angular/v7/services/CustomTemplatesService/#channelheaderinfotemplate)

### Channel actions

By default no channel action is displayed, but it's possible to [add action buttons to the channel header](https://getstream.io/chat/docs/sdk/angular/v7/services/CustomTemplatesService/#channelactionstemplate) component. You can follow our [code example](https://getstream.io/chat/docs/sdk/angular/v7/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](https://getstream.io/chat/docs/sdk/angular/v7/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"

---

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