Angular Template for Sortable objects

Question

I am trying to create a template for a sortable Object with Angular 4.

My Object looks like this:

Project={
    projectName: string;
    capacity: number;
    testHours: number;
}

I have multiple of such Projects stored in environment.projects and i want to have this in a sortable drag and drop object displayed.

I use therefore the ngx-bootstrap bs-sortable tag which looks like this:

<bs-sortable [(ngModel)]="environment.projects" 
[itemTemplate]="itemTemplate" itemClass="sortable-item" 
itemActiveClass="sortable-item-active"
placeholderItem="Drag here" placeholderClass="sortable-item" 
wrapperClass="sortable-wrapper"></bs-sortable>

Everything works fine except of the template, where i want to show projectName, capacity and testHours. I tried this template which does not work except of the index:

<ng-template #itemTemplate let-project="environment.projects" let-index="index"><span>{{index}}: {{projectName}} Capacity:{{capacity}}h / Effort:{{testHours}}h</span></ng-template>

Now i just need to know how i should create the ng-template to have my expected behavior.

Many thanks in advance.

Answer 1

You have error in template. Try this one:

  <ng-template #itemTemplate let-item="item" let-index="index"> <span>{{index}}: {{item.value.projectName}} Capacity:{{item.value.capacity}}h / Effort:{{item.valu.testHours}}h</span></ng-template>