javascriptangulardrag-and-dropangular-cdkangular-cdk-drag-drop

Invalid ICU message. Missing '}' | Angular Material drag & drop

I wanted to try using material drag & drop in my angular app but a component containing only this code literally copied from https://material.angular.io/cdk/drag-drop/overview

<div cdkDropList cdkDropListOrientation="horizontal" class="example-list" (cdkDropListDropped)="drop($event)">
    @for (tok of sentTokens; track tok) {
    <div class="example-box" cdkDrag>{{tok}}</div>
    }
</div>

causes me these errors even though I don't see any unescaped brackets in this code
Invalid ICU message. Missing '}'
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)

What can be the reason?

Solution

  • You are not running Angular 17 so you dont have The new Conditional statements syntax like @for and @If syntax available kindly change your code to

    <div cdkDropList cdkDropListOrientation="horizontal" class="example-list" (cdkDropListDropped)="drop($event)">
    <ng-container *ngFor="tok of sentTokens; trackBy: tok">
        <div class="example-box" cdkDrag>{{tok}}</div>
    </ng-container>
</div>