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

Frank Modica · Accepted Answer · 2017-05-21 20:04:54Z

2

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?

edited May 21, 2017 at 20:04

answered May 21, 2017 at 18:33

Frank Modica

10.5k4 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Vignesh Over a year ago

if i fetch the items from server i can't able to load the component

Vignesh Over a year ago

For ex: { name: 'slider' componentSlider: 'sliderComponent' }

Frank Modica Over a year ago

You can create a new array, and loop through the list of items you get from the server. For each item, create a new object that has the properties you need, and push it into the new array.

Vignesh Over a year ago

componentSlider: 'sliderComponent' but it not loading @Frank

Vignesh Over a year ago

The componentSlider value is string so it's not rendering the html

|

Collectives™ on Stack Overflow

Angular 2 & 4 - Assign dynamically the a generated component

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related