Dynamic components loading at certain location in Angular2

Question

I am developing a new application in Angular2 and I have a requirement where I need to load some 8 controls(grid,charts, calendars etc) dynamically on my application. I am able to load all those controls dynamically. But my requirement is to display them in particular fashion like two controls per row which I am unable to do. At present all the controls are loaded but all in one column one below the other.

The below code shows how I got the gadgets list and how I am adding it to the component using viewContainerRef. But I couldn't able to control where this components can be displayed.

   for (let gadget of gadgets) {
                        this.userService.getGadgetsData(gadget.Id).subscribe(gadgetsData => {

                            switch (gadget.Name) {
                                case "PieChart":

                                    this.donughtChartData = gadgetsData.Data.Issues.map((v: any) => ({
                                        category: v.Values[0].Value,
                                        value: v.Values[2].Value,
                                    }));

                                    const factory = this.componentFactoryResolver.resolveComponentFactory(DonutComponent);
                                    const ref = this.viewContainerRef.createComponent(factory);
                                    ref.instance.donutchartData = this.donughtChartData;
                                    ref.changeDetectorRef.detectChanges();

                                    break;

Answer 1

Based on what you said I think this: you need to display the content put into your template/ .html file. your typescript will run fine but no where to view. use a div or something in your template and display that result.

once it is displayed you can give that div a class name of whatever ex " class='flex-box' and apply the styles below. They will automatically align them into columns and is very easy to understand; just give the link a read.

You want to use flex to achieve the columns

example here:

`ul{
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
     li{
      flex: 6 1 ; //the number refer to how much/fast the item will grow/shrink
       .form-control-item {//...some css}
      }
    }`

IF your question now turns into 'How do i use the template' then you need to look at other stack overflow Q's as that has been answered many times. you can also refer to the angular docs, and take the Hero's Tutorial

https://css-tricks.com/snippets/css/a-guide-to-flexbox/