# ChannelHeaderComponent

> **Info:** This is release candidate documentation for **Stream Chat Angular SDK v8**. For the latest stable version, see the [latest version (v7)](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/).

The channel name and image are read from `channel.data.custom.name` and `channel.data.custom.image`. If the channel has no name, the header displays the names of the channel members.

**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/v8/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/v8/services/CustomTemplatesService/#channelactionstemplate) component. You can follow our [code example](https://getstream.io/chat/docs/sdk/angular/v8/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/v8/code-examples/responsive-layout/) shows how you can use this to toggle the channel list on mobile screens.

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

## Inputs and outputs

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

---

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