Trying to implement the drag-and-drop functionality in an Angular Material table following the example provided in this [link] ().
app.component.ts:
import { Component,ElementRef,ViewChild } from '@angular/core';
import {MatTable} from '@angular/material/table';
import { CdkDragDrop, moveItemInArray,transferArrayItem } from '@angular/cdk/drag-drop';
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
// Data for the material table
const ELEMENT_DATA: PeriodicElement[] = [...];
// Destination data for dragging elements
const ELEMENT_DATA_DEST: PeriodicElement[] = [...];
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild('dataTable') table!: MatTable<PeriodicElement>;
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = ELEMENT_DATA;
inbox_lists=ELEMENT_DATA_DEST;
// Function to handle drop event in the table
dropTable(event: CdkDragDrop<PeriodicElement[]>): void {...}
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { MatTableModule } from '@angular/material/table';
import {DragDropModule} from '@angular/cdk/drag-drop';
import {CommonModule} from '@angular/common';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
@NgModule({
imports: [
CommonModule,
BrowserModule,
BrowserAnimationsModule,
DragDropModule,
MatTableModule,
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.component.html
... (HTML code snippet) ... Encountering an error :
Property 'table' has no initializer and is not definitely assigned in the constructor.
30 @ViewChild('dataTable') table: MatTable;