Fix stale OnPush UI updated by a third-party callback

A map SDK calls onSelectionChanged outside Angular, assigns a plain selectedPlace field, and the OnPush view stays stale until another click. Refactor the wrapper so the callback updates a signal, the view renders immediately in zoneless mode, and the SDK listener is removed when the component is destroyed. Do not add polling, ApplicationRef.tick, or a global Zone workaround.

SDK emits Place A -> heading immediately shows Place A
SDK emits Place B -> heading shows Place B
component destroyed -> listener removed; later SDK events do nothing

• Represent displayed external state with a signal.
• Register exactly one SDK listener.
• Own listener cleanup through the component lifecycle.
• Keep SDK-specific objects behind a wrapper boundary.
• Work with OnPush and zoneless change detection.

1. Wrap the SDK callback in the component or a scoped adapter.
2. Update a writable signal from the callback.
3. Register listener removal with DestroyRef at the same ownership boundary.
4. Render the signal directly in the template.
5. Test update and teardown with a fake SDK.

import {ChangeDetectionStrategy, Component, DestroyRef, inject, signal} from '@angular/core';

@Component({
  selector: 'app-map-selection',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @if (selectedPlace(); as place) {
      <h2>{{ place.name }}</h2>
    } @else {
      <p>Select a place on the map.</p>
    }
  `,
})
export class MapSelection {
  private readonly sdk = inject(MapSdk);
  private readonly destroyRef = inject(DestroyRef);
  readonly selectedPlace = signal<Place | null>(null);

  constructor() {
    const removeListener = this.sdk.onSelectionChanged(place => {
      this.selectedPlace.set({id: place.id, name: place.name});
    });
    this.destroyRef.onDestroy(removeListener);
  }
}

Each SDK event performs O(1) state replacement and schedules only the views that consume the signal.

• A noisy SDK may require equality or rate control before updating Angular state.
• Mutable SDK objects are mapped into application-owned values to avoid later hidden mutation.
• An SDK that cannot unregister callbacks needs an adapter that ignores events after disposal.
• High-frequency animation data may belong outside Angular until a meaningful UI value changes.

• Emit an SDK callback and await fixture stability without calling detectChanges.
• Destroy the fixture and verify the fake SDK's remove function ran once.
• Mutate the original SDK object after emission and verify the displayed snapshot does not change.
• Emit the same value repeatedly and decide whether equality suppression is required.

• Mutating a plain field does not necessarily schedule an OnPush or zoneless render.
• Calling a global tick makes unrelated application work run.
• Leaving the listener registered retains the destroyed component.
• Storing the SDK's mutable object leaks its ownership model into the UI.