NG8002: Can't bind to 'cdkDropListData' since it isn't a known property of 'table'

I am getting this error "NG8002: Can't bind to 'cdkDropListData' since it isn't a known property of 'table'." and every fix i see online is just "add it to the module" but its already in the module so i just do not understand why i am getting this error.

i also get a warning that i surmise is related insofar as its an imported module that isnt being "seen": NG8103: The *ngFor directive was used in the template, but neither the NgFor directive nor the CommonModule was imported. Use Angu lar's built-in control flow @for or make sure that either the NgFor directive or the CommonModule is included in the @Component.imports array of this component.

I am wondering if theres something going on with the way my imports are structured? I am aware they are somewhat redundant at this point but that is a result of trying over and over to get it to recognize these imports.

heres my app module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { AppComponent } from './app.component';
import { CarrierComponent } from './entities/carrier.component'; // import it directly
import { NgForOf, CommonModule } from '@angular/common';

@NgModule({
declarations: [
AppComponent,
CarrierComponent
],
imports: [
BrowserModule,
CommonModule,
DragDropModule,
NgForOf
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}



app component html

<div class="container mt-5">
<div *ngFor="let carrier of carriers" class="card bg-secondary mx-auto mb-2">
<div class="card-body table-container">
<div class="row">
<div class="col-xl-8">
<h2>{{ carrier.name }}</h2>
</div>
<div class="col-xl-4">
<h2 class="total-size">{{ carrier.getCurrentTotal() }} / {{ carrier.capacity }}</h2>
</div>
</div>
<div class="table-responsive mb-0 pb-0" style="font-size: 20px;">
<table cdkDropList [cdkDropListData]="carrier.items" (cdkDropListDropped)="onDrop($any($event), carrier)" class="table table-hover">
<thead>
<tr>
<th class="bg-info bg-opacity-25">Item</th>
<th class="bg-info bg-opacity-25">Size</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of carrier.items" cdkDrag class="bg-info bg-opacity-25">
<td>{{ item.name }}</td>
<td>{{ item.size }}</td>
</tr>
</tbody>
<tbody>
<tr *ngFor="let container of carrier.containers" cdkDrag class="bg-info bg-opacity-25">
<td>{{ container.name }}</td>
<td>{{ container.getCurrentTotal() }} / {{ container.capacity }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>


and app component ts:

import { Component, OnInit } from '@angular/core';
import { EXAMPLE_CARRIERS } from './example.data';
import { CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
import { Item } from './entities/item';
import { Carrier } from './entities/carrier';
import {Container} from './entities/container';
import {NgFor, CommonModule} from '@angular/common';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
carriers = EXAMPLE_CARRIERS;

// Handles the drop event when items are moved between carriers
onDrop(event: CdkDragDrop<Item[], any>, target: Carrier | Container) {
const movedItem = event.item.data;
const sourceContainer = event.previousContainer.data;

const itemIndex = sourceContainer.findIndex((item: any) => item.id === movedItem.id);
sourceContainer.splice(itemIndex, 1);

if (target instanceof Carrier) {
target.items.push(movedItem);
} else {
target.items.push(movedItem);
}
}

ngOnInit() {}
}



What am I doing wrong here? I am new to angular and this is making me want to tear my hair out.

Continue reading...