Drop a redundant change-detection call from the connection badge
Angular · Angular · advanced · modification
Tidies up the connection badge. On an `OnPush` component the subscription callback already runs Angular's change detection when it emits, so the manual `this.cdr.markForCheck()` was belt-and-suspenders. Dropped it, along with the now-unused `ChangeDetectorRef` injection and its import. The subscription (still guarded by `takeUntilDestroyed`) and the template are untouched, and the badge tests still pass.
The badge sits in the app header and is the user's only signal that the realtime connection dropped. The app runs zoneless change detection (Angular v21's default) and the component is `ChangeDetectionStrategy.OnPush`. `ConnectionMonitor.state$` is a `BehaviorSubject`-backed stream that replays the current state on subscribe and pushes a new value on every transport change; state changes arrive asynchronously from the socket layer, never from user interaction with this component.
Requirements
- Render the live connection state as a status dot plus label; whenever `ConnectionMonitor.state$` emits a new state, the displayed dot and label must update to reflect it.
- Subscribe for the lifetime of the component and tear the subscription down when the component is destroyed — no leaked subscription.
- This is a cleanup PR: drop the change-detection call flagged as redundant. After the change the badge must still update on every state emission.
Files touched
- src/app/components/connection-status-badge.ts
--- src/app/components/connection-status-badge.ts
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ConnectionMonitor, ConnectionState } from '../services/connection-monitor';
export class ConnectionStatusBadge {
private monitor = inject(ConnectionMonitor);
- private cdr = inject(ChangeDetectorRef);
state: ConnectionState = 'online';
this.state = state;
this.label = LABELS[state];
- this.cdr.markForCheck();
});
}