How can I render dynamic components in multidimensional array

Question

I have a multidimensional array of components I want to render to a grid:

[
  [
    {
      component: class TitleComponent,
      data: {
        title: "Invoice"
      },
      row: 1
    },
    {
      component: class AddressComponent,
      data: {
        companyName: "Comapny Name",
        addressLineOne: "123 Street Name",
        addressLineTwo: "Area",
        addressLineThree: "City"
      },
      row: 1
    }
  ],
  [
    {
      component: class DetailsComponent,
      data: {
        description: "lorem ipsum dolor sit amet"
      },
      row: 2
    }
  ]
]

I want to render the component in the required row, for example, the TitleComponent should be rendered in the first row, while the DetailsComponent should be rendered in the second row.

The html structure I am looking to output is something like this:

<div *ngFor="let row of rows">
  <div *ngFor="let component of row">
    <ng-template gridBlock></ng-template>
  </div>
</div>

Not sure how possible the output is, but essentially I want to create a row for each array and then render each component inside the relevant row.

I have used @ViewChildren to render the components, but seems like whenever I add a new dynamic component to the Querylist, it messes up the order in which the components are rendered.

@ViewChildren( GridContainerDirective ) components!: QueryList< GridContainerDirective >

P.S. I am new to angular and any help or direction will be much appreciated.

indepth.dev/posts/1400/components-by-selector-name-angular

Vikas
– Vikas

2022-09-20 14:27:54 +00:00
Commented Sep 20, 2022 at 14:27 — Vikas
– Vikas, Commented Sep 20, 2022 at 14:27

Andrei · Accepted Answer · 2022-09-20 14:29:55Z

1

you can render components with the help of *ngComponentOutlet directive

<div *ngFor="let row of rows">
  <div *ngFor="let component of row">
    <ng-container *ngComponentOutlet="component.component"></ng-container>
  </div>
</div>

however it is not possible to pass data directly. so it would be required to craete injectors for those components, and inject the data inside of them

answered Sep 20, 2022 at 14:29

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

How can I render dynamic components in multidimensional array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related