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.

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.

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:

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:

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:

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

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

Define the template for poll display:

<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>

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:

<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.

The next step is to define the poll composer template.

Define the template for poll composer:

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

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:

Working example

If you want to try polls with Angular SDK, visit the demo application.

For a working code example checkout the sample application:

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.

<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.

Custom autocompletes

AddOptionComponent