Template parse errors: There is no directive with "exportAs" set to "cdkDropList"
As stated in the API you need to import DragDropModule
in your module
import {DragDropModule} from '@angular/cdk/drag-drop';
@NgModule({
...
imports: [
...
DragDropModule
...
an extra answer for those new to angular world. in angular Use the hash symbol (#) to declare a reference variable. The following reference variable, #phone, declares a phone variable on an element.
<input #phone placeholder="phone number" />
A template reference variable is often a reference to a DOM element within a template. It can also refer to a directive (which contains a component), an element, TemplateRef, or a web component. In most cases, Angular sets the reference variable's value to the element on which it is declared. but if you want to use a directive. it should be declared in reference variable value like below example
<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
<label for="name"
>Name <input class="form-control" name="name" ngModel required />
</label>
<button type="submit">Submit</button>
</form>
ngForm is a directive . and it should be known to angular compiler. and in the question
<div
cdkDropList
#todoList="cdkDropList"
[cdkDropListData]="todo"
[cdkDropListConnectedTo]="[doneList]"
class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
</div>
</div>
cdkDropList is a directive too. therefore it should be known to compiler and therefore its module should be imported to the module it is used