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 './appponent';
import { CarrierComponent } from './entities/carrierponent'; // 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: './appponent.html',
  styleUrls: ['./appponent.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.

EDIT: main.ts as asked for in the comments:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/appponent';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

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 './appponent';
import { CarrierComponent } from './entities/carrierponent'; // 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: './appponent.html',
  styleUrls: ['./appponent.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.

EDIT: main.ts as asked for in the comments:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/appponent';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

• html
• angular
• typescript

• please share main.ts – Naren Murali Commented Mar 28 at 4:01
• I added main.ts, but thats not something i've really touched in the session. – Johnny Rinaldo Commented Mar 28 at 4:42

1 Answer 1

You are using standalone methodology so you need to add the imports on the component itself going forward, I think you are using angular 19, so run the angular migration script to convert your components to standalone.

Angular Standalone Migration

Anatomy of a component

@Component({
  selector: 'app-root',
  templateUrl: './appponent.html',
  styleUrls: ['./appponent.css'],
  imports: [
    CommonModule,
    DragDropModule,
  ],
})
export class AppComponent implements OnInit {
  ...

Once the migration is completed. You will not need app module anymore, there is a migration for that also for getting rid of modules, after moving to standalone.