Same as RxJS Subscription.add(). Useful, for example, for writing wrappers for the SkyhookDndService methods, which might internally listen()/subscribe to DropTargetSpec and provide a convenient callback after you hover without dropping or exiting for a specified duration. That would require the following pattern:

function wrapper(dndService, types, spec, callback) {
    let subj = new Subject();
    let dt = dndService.dropTarget(types, {
        ...spec,
        hover: monitor => {
            subj.next();
            spec.hover && spec.hover(monitor);
        }
    });
    // runs the callback until the returned connection
    // is destroyed via unsubscribe()
    dt.add(subj.pipe( ... ).subscribe(callback))
    return dt;
}

A connection maintains a subscription to dnd-core's drag state changes. This function is how you are notified of those changes.

This function is essentially RxJS Observable.map with one small optimization: it runs the output of the function you provide through distinctUntilChanged, and checks reference equality (===) for scalars and shallowEqual for Objects.

Because of #2, you can happily emulate react-dnd-style code like:

collected$ = this.target.listen(monitor => ({
  isDragging: monitor.isDragging(),
  isOver: monitor.isOver(),
  canDrop: monitor.canDrop(),
}));

... in which case you probably want to use the *ngIf as pattern for grouping subscriptions into one bound template variable:

<ng-container *ngIf="collected$ | async as c">
  <p>{{c.isDragging ? 'dragging': null}}<p>
  ...
</ng-container>

You can also subscribe one-by-one, with isDragging$ = listen(m => m.isDragging()).

This method MUST be called, however you choose to, when ngOnDestroy() fires. If you don't, you will leave subscriptions hanging around that will fire callbacks on components that no longer exist.