# ChannelComponent

> **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 `Channel` component is a container component that displays the [`ChannelHeader`](https://getstream.io/chat/docs/sdk/angular/v8/components/ChannelHeaderComponent/), [`MessageList`](https://getstream.io/chat/docs/sdk/angular/v8/components/MessageListComponent/), [`NotificationList`](https://getstream.io/chat/docs/sdk/angular/v8/components/NotificationListComponent/), [`MessageBouncePrompt`](https://getstream.io/chat/docs/sdk/angular/v8/components/MessageBouncePromptComponent/) and [`MessageInput`](https://getstream.io/chat/docs/sdk/angular/v8/components/MessageInputComponent/) components. You can also provide the [`Thread`](https://getstream.io/chat/docs/sdk/angular/v8/components/ThreadComponent/) component to use message [threads](https://getstream.io/chat/docs/javascript/threads/).

## Usage

```html
<div id="root">
  <stream-channel-list></stream-channel-list>
  <stream-channel>
    <!-- Main messages in the channel -->
    <stream-channel-header></stream-channel-header>
    <stream-message-list></stream-message-list>
    <stream-message-input></stream-message-input>
    <!-- Main messages in the channel -->
    <!-- Thread messages in the channel -->
    <!-- The name attribute selects the slot for the thread component inside channel -->
    <stream-thread name="thread">
      <stream-message-list mode="thread"></stream-message-list>
      <stream-message-input mode="thread"></stream-message-input>
    </stream-thread>
    <!-- Thread messages in the channel -->
  </stream-channel>
  <stream-notification-list></stream-notification-list>
</div>
```

The `Channel` component doesn't do any settings, it just displays its children components (the `thread` slot is only displayed while a thread is open). The main purpose of this component is to provide the layout for the initial chat UI.

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