Info:
This is release candidate documentation for Stream Chat Angular SDK v8. For the latest stable version, see the latest version (v7).

Mention actions

In this example, we will demonstrate how to create custom mention actions if a user clicks on or hovers over a mention in a message.

Custom mention template

You can provide a custom message template to the CustomTemplatesService:

Create the template (for example in your AppComponent):

<ng-template #mentionTemplate let-user="user">
  <b>&#64;{{ user.name || user.id }}</b>
</ng-template>

The Message component will provide the mentioned user in a variable called user, the object has a UserResponse type (exported by stream-chat) and you can use it to display information about the user. Custom user fields are available under user.custom.

The @ character starts a block in Angular templates (Angular 17+), so you need to escape it as &#64; when you want to display it.

This template looks and works like the default mention template, however you can add interactions to this element.

Register the template in your TypeScript code (for example in your AppComponent).

These are the necessary steps:

Here is an example file:

import {
  AfterViewInit,
  Component,
  TemplateRef,
  ViewChild,
} from "@angular/core";
import {
  ChatClientService,
  ChannelService,
  StreamI18nService,
} from "stream-chat-angular";
import {
  CustomTemplatesService,
  MentionTemplateContext,
} from "stream-chat-angular";
import { environment } from "../environments/environment";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent implements AfterViewInit {
  // Create a reference to the custom template
  @ViewChild("mentionTemplate")
  private mentionTemplate!: TemplateRef<MentionTemplateContext>;

  constructor(
    private chatService: ChatClientService,
    private channelService: ChannelService,
    private streamI18nService: StreamI18nService,
    private customTemplatesService: CustomTemplatesService, // Import the customTemplatesService
  ) {
    void this.chatService.init(
      environment.apiKey,
      environment.userId,
      environment.userToken,
    );
    void this.channelService.init({
      type: "messaging",
      members: { $in: [environment.userId] },
    });
    this.streamI18nService.setTranslation();
  }

  ngAfterViewInit(): void {
    // Register your custom template
    this.customTemplatesService.mentionTemplate$.next(this.mentionTemplate);
  }
}

Display user information on click

In this step we will create a popover with additional user information that will be displayed if the user clicks on a mention. We are using the ngx-popperjs library for the popover, but you can use a different library as well.

Install ngx-popperjs

Let's install the necessary dependency:

npm install ngx-popperjs --save

The latest ngx-popperjs release supports Angular 17. For newer Angular versions you can use ngx-float-ui (it is already a dependency of stream-chat-angular), which has the same API with different names (NgxFloatUiModule, [floatUi], <float-ui-content>, NgxFloatUiTriggers).

Import the NgxPopperjsModule module

import {NgxPopperjsModule} from 'ngx-popperjs';

@NgModule({
 // ...
 imports: [
   // ...
   NgxPopperjsModule
 ]
})

Import SCSS

Add this to your styles.scss:

@use "ngx-popperjs" as popper;

@include popper.ngx-popperjs-theme(white, black);

CSS is also supported.

Create the popover

<ng-template #mentionTemplate let-user="user">
  <span
    style="cursor: pointer"
    [popper]="popperContent"
    [popperPositionFixed]="true"
    popperAppendTo="body"
  >
    <b>&#64;{{ user.name || user.id }}</b>
  </span>
  <popper-content #popperContent style="display: inline">
    <div class="str-chat" style="display: flex; align-items: center">
      <stream-avatar
        [imageUrl]="user.image"
        [name]="user.name || user.id"
      ></stream-avatar>
      <b>{{ user.name || user.id }}</b>
      <span>&nbsp;{{ user.online ? "online" : "offline" }}</span>
    </div>
  </popper-content>
</ng-template>

The message text element clips overflowing content, so the popover is appended to the body with popperAppendTo="body". The str-chat class on the popover content applies the SDK's theme variables (for example, the avatar size), since the popover is rendered outside the chat UI.

This is the popover that is displayed if we click on a mention in a message:

Mention Screenshot

ngx-popperjs has a lot of other configuration options, feel free to explore those.

Display user information on hover

Let's modify our solution and display the popover on hover instead of click:

We need to add a variable to our component class:

import { NgxPopperjsTriggers } from "ngx-popperjs";

popoverTrigger = NgxPopperjsTriggers.hover;

And modify our template:

<ng-template #mentionTemplate let-user="user">
  <span
    style="cursor: pointer"
    [popper]="popperContent"
    [popperPositionFixed]="true"
    [popperTrigger]="popoverTrigger"
    popperAppendTo="body"
  >
    <b>&#64;{{ user.name || user.id }}</b>
  </span>
  <popper-content #popperContent style="display: inline">
    <div class="str-chat" style="display: flex; align-items: center">
      <stream-avatar
        [imageUrl]="user.image"
        [name]="user.name || user.id"
      ></stream-avatar>
      <b>{{ user.name || user.id }}</b>
      <span>&nbsp;{{ user.online ? "online" : "offline" }}</span>
    </div>
  </popper-content>
</ng-template>