# ChannelListComponent

The `ChannelList` component renders the list of channels.

The `ChannelList` displays channels using pagination, new channels are loaded if the user clicks the "Load more" button.

The channel list is always visible on desktop devices, on mobile devices, the list can be opened or closed controlled by a button in the [`ChannelHeader`](https://getstream.io/chat/docs/sdk/angular/v4/components/ChannelHeaderComponent/) component.

## Customization

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

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

>
> **Note:** If you want to create your own channel list, you can use the [`ChannelService`](https://getstream.io/chat/docs/sdk/angular/v4/services/ChannelService/) to receive the channels and interact with the Stream API.
>
> Other building blocks, that you might find useful:
>
> ### Toggle
>
> The channel list is always visible on desktop devices, on mobile devices, the list can be opened or closed controlled by a button in the `ChannelHeader` component. The open/close mechanism is implemented by the [`ChannelListToggleService`](https://getstream.io/chat/docs/sdk/angular/v4/services/ChannelListToggleService/).
>
> ### Loading indicator
>
> The `ChannelList` component uses the [`LoadingIndicator`](https://getstream.io/chat/docs/sdk/angular/v4/components/LoadingIndicatorComponent/) component to display a spinner while more channels are being fetched.
>
> ### Icons
>
> The `ChannelList` component uses the [`Icon`](https://getstream.io/chat/docs/sdk/angular/v4/components/IconComponent/) component to display icons.
>

**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/v4/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.

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

---

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