Can an Angular CDK event handler be bound to a host?

I have an Angular component below for which I would like to support drag and drop. Ideally the host component would be the 'Drop List' as the host contains the list items ( I know I could simply wrap the items with a container and bind drag/drop handlers to it ). When I try the following, the event handler is not reached. How do I bind the cdkDropListDropped event handler to the host?

import {
ChangeDetectionStrategy,
InputSignal,
Component,
Input,
Output,
HostBinding,
HostListener,
EventEmitter,
input
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { CdkDropList, CdkDrag, CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
selector: 'my-list',
standalone: true,
imports: [CommonModule, CdkDropList, CdkDrag],
templateUrl: './my-list.component.html',
styleUrls: ['./my-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyListComponent {
protected list: string[] = [];

@HostBinding('attr.cdkDropList') droplist = true;

@HostListener('cdkDropListDropped', ['$event'])
onDrop(event: CdkDragDrop<string[]>) {
console.log(event);
moveItemInArray(this.list, event.previousIndex, event.currentIndex);
}
}


I tried to use the HostListener decorator function to no avail.

Continue reading...