I am trying to make my component reusable. This a a drag and drop list. I need the reference to be a variable. It’s value is passed with @Input.
How can I make it work? Is there another way to do this?

component.html :

<mat-list
dense
id="c1-r3"
class="geographic-list"
cdk-scrollable
cdkDropList
#[reference]="cdkDropList"
[cdkDropListData]="items"
[cdkDropListConnectedTo]="[connectedTo]"
(cdkDropListDropped)="drop($event)">

component.html:

export class Component {
@Input({ required: true }) public connectedTo: string;
@Input({ required: true }) public items: KeyValuePair[] = [];
@Input({ required: true }) public reference: string;

In parent component:

<atlas-restrictions-edition
    connectedTo="unselectedList"
    reference="selectedList"
    [items]="selectedItems"
/>