# ChannelListComponent

> **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 `ChannelList` component renders the list of channels.

The `ChannelList` displays channels using pagination, the next page is loaded when the user scrolls to the bottom of the list (or clicks the "Load more" button if the list isn't scrollable).

The channel list is always visible by default. On mobile devices, you can open or close the list with a menu button in the [`ChannelHeader`](https://getstream.io/chat/docs/sdk/angular/v8/components/ChannelHeaderComponent/) component, the [responsive layout guide](https://getstream.io/chat/docs/sdk/angular/v8/code-examples/responsive-layout/) shows how.

![Channel List](https://getstream.io/docs-assets/images/469f804ff0ee.png)

## Customization

### UI customization

**Example 1** - Using a custom channel list component

See our [customization guide](https://getstream.io/chat/docs/sdk/angular/v8/concepts/customization/) on how to provide your own channel list component.

**Example 2** - Using a custom channel preview component

If you only want to customize the channel preview items (not the whole list), see the [channel preview customization](https://getstream.io/chat/docs/sdk/angular/v8/components/ChannelPreviewComponent/#customization) guide.

**Example 3** - Content injection points

It's possible to inject your own content to the top or to the bottom of the channel list:

```html
<stream-channel-list>
  <input channel-list-top placeholder="Search" />
  <button channel-list-bottom>Add new channel</button>
</stream-channel-list>
```

Use the `channel-list-top` attribute to inject content at the top of the channel list, and the `channel-list-bottom` to display content at the bottom of the channel list.

### Behavior customization

Please refer to the [channel list guide](https://getstream.io/chat/docs/sdk/angular/v8/concepts/channel-list/)

[//]: # "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/ChannelListComponent/](https://getstream.io/chat/docs/sdk/angular/v8/components/ChannelListComponent/).