|
| 1 | +--- |
| 2 | +id: change-detection |
| 3 | +sidebar_position: 4 |
| 4 | +title: Change detection |
| 5 | +--- |
| 6 | + |
| 7 | +For performance reasons, the Stream chat WebSocket connection is opened outside of the [Angular change detection zone](https://angular.io/guide/zone). This means that when we react to WebSocket events, Angular won't update the UI in response to these events. Furthermore, if a new component is created reacting to a WebSocket event (for example, if we receive a new message, and a new message component is created to display the new message), the new component will operate outside of the Angular change detection zone. To solve this problem, we need to reenter Angular's change detection zone. |
| 8 | + |
| 9 | +## Reentering Angular's change detection zone |
| 10 | + |
| 11 | +You can reenter Angular's change detection zone with the `run` method of the `NgZone` service. For example if you want to display a notification when a user is added to a channel, you can watch for the `notification.added_to_channel` event and return to the zone when that event is received: |
| 12 | + |
| 13 | +```typescript |
| 14 | +import { Component, NgZone, OnInit } from "@angular/core"; |
| 15 | +import { filter } from "rxjs/operators"; |
| 16 | +import { ChatClientService, NotificationService } from "stream-chat-angular"; |
| 17 | + |
| 18 | +@Component({ |
| 19 | + selector: "app-root", |
| 20 | + templateUrl: "./app.component.html", |
| 21 | + styleUrls: ["./app.component.scss"], |
| 22 | +}) |
| 23 | +export class AppComponent implements OnInit { |
| 24 | + constructor( |
| 25 | + private chatService: ChatClientService, |
| 26 | + private notificationService: NotificationService, |
| 27 | + private ngZone: NgZone |
| 28 | + ) {} |
| 29 | + |
| 30 | + ngOnInit(): void { |
| 31 | + this.chatService.notification$ |
| 32 | + .pipe(filter((n) => n.eventType === "notification.added_to_channel")) |
| 33 | + .subscribe((notification) => { |
| 34 | + // reenter Angular's change detection zone |
| 35 | + this.ngZone.run(() => { |
| 36 | + this.notificationService.addTemporaryNotification( |
| 37 | + `You've been added to the ${notification.event.channel?.name} channel`, |
| 38 | + "success" |
| 39 | + ); |
| 40 | + }); |
| 41 | + }); |
| 42 | + } |
| 43 | +} |
| 44 | +``` |
| 45 | + |
| 46 | +If you were to display the notification without reentering Angular's zone, the `addTemporaryNotification` would run outside of Angular's change detection zone, and the notification wouldn't disappear after the 5-second timeout. |
| 47 | + |
| 48 | +## When necessary to reenter the zone |
| 49 | + |
| 50 | +You need to reenter Angular's change detection zone when |
| 51 | + |
| 52 | +- you subscribe to events using the [`notification$`](../services/chat-client.mdx/#notification) Observable of the `ChatClientService` |
| 53 | +- you subscribe to channel events |
| 54 | + |
| 55 | +For example the [`ChannelPreview`](../components/channel-preview.mdx) component needs to subscribe to the `message.read` channel events to know if the channel has unread messages and reenter Angular's zone when an event is received: |
| 56 | + |
| 57 | +```typescript |
| 58 | +this.channel.on("message.read", () => |
| 59 | + this.ngZone.run(() => { |
| 60 | + this.isUnread = !!this.channel.countUnread() && this.canSendReadEvents; |
| 61 | + }) |
| 62 | +); |
| 63 | +``` |
| 64 | + |
| 65 | +## When unnecessary to reenter the zone |
| 66 | + |
| 67 | +You **don't** need to reenter the zone when |
| 68 | + |
| 69 | +- you use the SDK's default components in your UI and don't watch for additional events |
| 70 | +- when you [override the default channel list behavior](../services/channel.mdx/#channels) |
| 71 | +- when you subscribe to the [`connectionState$`](../services/chat-client.mdx/#connectionstate) Observable of the `ChatClientService` |
| 72 | + |
| 73 | +If you are unsure whether or not you are in Angular's zone, you can use the following function call to check: |
| 74 | + |
| 75 | +```typescript |
| 76 | +NgZone.isInAngularZone(); |
| 77 | +``` |
0 commit comments