# Polls

The Stream API allows you to create polls and attach them to messages. To know more about the Poll API, read the [JavaScript guide about polls](https://getstream.io/chat/docs/javascript/polls-api/).

This guide shows how to enable poll UI components in the Angular SDK.

## Import polls module

Poll UI components are defined in the `StreamPollsModule`, import this module to the relevant module/component in your application.

```ts
import { StreamChatModule, StreamPollsModule } from "stream-chat-angular";
```

## Register poll subscriptions

For real-time updates initialize poll manager with the `registerSubscriptions` method. You should do this when you're initializing the `chatService`:

```ts
this.chatService.init(apiKey, user, userToken);
this.chatService.chatClient.polls.registerSubscriptions();
```

In case you have a log-out feature in your application, also call `unregisterSubscriptions`:

```ts
this.chatService.disconnectUser();
this.chatService.chatClient.polls.unregisterSubscriptions();
```

## Display poll component

There are two built-in components for displaying polls.

`stream-poll` component is used to display a poll inside the message component:

![Poll Component](https://getstream.io/docs-assets/images/5464c505017d.png)

`stream-poll-preview` component is used to display the poll name when a poll is quoted in a message.

![Poll Preview Screenshot](https://getstream.io/docs-assets/images/51be263ea013.png)

In the component where you display the channel component, you can define the template for poll.

1. Define the template for poll display:

```html
<ng-template
  #pollTemplate
  let-pollId="pollId"
  let-messageId="messageId"
  let-isQuote="isQuote"
>
  <ng-container *ngIf="isQuote; else poll">
    <stream-poll-preview
      [pollId]="pollId"
      [messageId]="messageId"
    ></stream-poll-preview>
  </ng-container>
  <ng-template #poll>
    <stream-poll [pollId]="pollId" [messageId]="messageId"> </stream-poll>
  </ng-template>
</ng-template>
```

2. Register the template in the component class:

```ts
import {
  CustomTemplatesService,
} from 'stream-chat-angular';

//Define property for template
@ViewChild('pollTemplate') pollTemplate!: TemplateRef<{
  pollId: string;
  messageId: string;
}>;

// Inject CustomTemplatesService into your component
constructor(private customTemplateService: CustomTemplatesService)

ngAfterViewInit(): void {
  // Register the template
  this.customTemplateService.pollTemplate$.next(this.pollTemplate);
}
```

## Display poll composer component

First, lets enable the "add poll" button in the message input component:

```html
<stream-message-input [displayPollCreateButton]="true"> </stream-message-input>
```

The button is only displayed if the logged-in user's has the `send-poll` capability, so you don't have to worry about authorization.

Please note that polls are not supported for thread messages, so enabling `displayPollCreateButton` for `thread` inputs has no effect.

![Add poll button](https://getstream.io/docs-assets/images/1411b49ec623.png)

The next step is to define the poll composer template.

1. Define the template for poll composer:

```html
<ng-template
  #pollComposerTemplate
  let-pollCompose="pollCompose"
  let-cancel="cancel"
>
  <stream-poll-composer
    (pollCompose)="pollCompose($event)"
    (cancel)="cancel()"
  ></stream-poll-composer>
</ng-template>
```

2. Register the template in the component class:

```ts
import {
  CustomTemplatesService,
} from 'stream-chat-angular';

//Define property for template
@ViewChild('pollComposerTemplate')
pollComposerTemplate!: TemplateRef<{
  pollCompose: (pollId: string) => void;
  cancel: () => void;
}>;

// Inject CustomTemplatesService into your component
constructor(private customTemplateService: CustomTemplatesService)

ngAfterViewInit(): void {
  // Register the template
  this.customTemplateService.pollComposerTemplate$.next(
    this.pollComposerTemplate
  );
}
```

This is how the poll composer component looks like:

![Poll Composer](https://getstream.io/docs-assets/images/45074c3ecfdd.png)

## Working example

If you want to try polls with Angular SDK, visit the [demo application](https://angular-chat-demo-getstreamio.vercel.app/).

For a working code example checkout the sample application:

- [Importing polls module](https://github.com/GetStream/stream-chat-angular/blob/master/projects/sample-app/src/app/app.module.ts)
- [Defining poll templates](https://github.com/GetStream/stream-chat-angular/blob/master/projects/sample-app/src/app/app.component.html)
- [Register poll templates](https://github.com/GetStream/stream-chat-angular/blob/master/projects/sample-app/src/app/app.component.ts)

## Customizations

Since there is no defaul UI for polls, you can easily replace the built-in components with your own custom components.

For additional customization granularity, the `stream-poll` component is made up of three smaller components:

- Header
- Option list
- Actions

You can overwrite these parts of the component with your own components.

```html
<stream-poll [pollId]="pollId" [messageId]="messageId">
  <stream-poll-header
    poll-header
    [pollId]="pollId"
    [messageId]="messageId"
  ></stream-poll-header>
  <stream-poll-options-list
    poll-options-list
    [pollId]="pollId"
    [messageId]="messageId"
    [maxOptionsDisplayed]="20"
  ></stream-poll-options-list>
  <stream-poll-actions
    poll-actions
    [pollId]="pollId"
    [messageId]="messageId"
    [maxOptionsDisplayed]="20"
  ></stream-poll-actions>
</stream-poll>
```

You can find the documentation for all built-in poll components in the "Components" chapter, you can use these components as building blocks to create your own custom UI.


---

This page was last updated at 2026-08-19T08:16:56.739Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/code-examples/polls/](https://getstream.io/chat/docs/sdk/angular/code-examples/polls/).