Angular 2 & 4 - Assign dynamically the a generated component

Question

I am building a drag and drop, so when I drag and drop an element on the page I would like to : 1) Generate a component 2) Assign it to the div that I just dropped on.

The drag and drop is created already, and I figured out how to create the compoenent using ViewContainerRef

HTML

<div #parent></div>

TS

@ViewChild('parent', { read: ViewContainerRef }) parent: ViewContainerRef;

let childComponent = this._componentFactoryResolver.resolveComponentFactory(TextComponent); 
let anotherChildComponent = this._componentFactoryResolver.resolveComponentFactory(ullist)
this.parent.createComponent(childComponent);
this.parent.createComponent(anotherChildComponent);

What I am stuck on is that I can’t have the same as when I drop the component the page the previouse one that is dropped get also updated as they share the same #parent

I was trying to figure how can i assign the generated component to the one I clicked. Maybe generate a radom number and than insert the random number in *ngComponentOutlet and when I click I pick up the generated number and assign my created component to it?

My app is built on Angular 4, so I tried ngComponentOutlet and create a plunker that has 4 divs , When you click on a div I would like to assign component to it. Or insert it. The way I have the 3 divs are through a ngFor loop that is generated f from an array.

What I want to get is that when I click on the DIV , I am able to to tell that specific ( specific I mean by I clicked on the div and each DIV has a ngComponentOutlet) ngComponentOutlet what component it should inject.

Here is the plunker: https://plnkr.co/edit/JvXBLOVaeaYO5bmMQa6a?p=preview

Answer 1

First, is there a typo in your plnkr? You have:

<div *ngFor="let item of items" (click)="loadComponent(item)">
    ...
    <ng-container *ngComponentOutlet="items.componentSlider"></ng-container>

Should it be item.componentSlider, not items?

---

That said, you could attach an additional property like isLoaded on each item:

  items:Array<any> = [
    {
      name: 'slider'
      componentSlider: sliderComponent,
      isLoaded: false
    },
    {
      name: 'user'
      componentSlider: usersComponent,
      isLoaded: false
    },
    {
      name: 'slider'
      componentSlider: sliderComponent,
      isLoaded: false
    },
    {
      name: 'alert danger'
      componentSlider: AlertDangerComponent,
      isLoaded: false
    }
  ]

Then update your loadComponent method:

loadComponent(item){
    item.isLoaded = true;
}

And update your template:

<div *ngFor="let item of items" (click)="loadComponent(item)">
    <ng-container *ngIf="item.isLoaded">
       <ng-container *ngComponentOutlet="item.componentSlider"></ng-container>
    </ng-container>
</div>

Here is a plnkr. The component is generated inside the div that was clicked. Does this accomplish what you need?