I am attempting to use Angular's CDK drag and drop functionality to create a list of components that can be rearranged. However, I am encountering an issue where the components are not being displayed correctly.
In my App.component.ts file:
import { RightSideCombinedComponent } from './right-side.component';
import { LeftSideComponent } from './left-side.component';
@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
innerComponenets: Array<any> = [
RightSideCombinedComponent,
LeftSideComponent,
];
constructor() {}
ngOnInit(): void {
}
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.innerComponenets, event.previousIndex, event.currentIndex);
}<div cdkDropList cdkDropListOrientation="horizontal" class="example-list" (cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of innerComponenets" cdkDrag>
{{item}}
</div>The issue I am facing is that instead of displaying the components, their code is being shown on the screen. Here are some screenshots for reference: Before drag and drop: https://i.stack.imgur.com/g0AKe.png
During drag and drop: https://i.stack.imgur.com/zFU0G.png
After drag and drop: https://i.stack.imgur.com/8R0WQ.png
If anyone has any insights on how to resolve this issue, your help would be greatly appreciated!