CODEWITHSUNDEEP
htmlangulartypescriptangular5
shahnshah
shahnshah

Reputation: 778

How can I create multiple dynamic components in multiple sections on a single page? Angular 5

I am trying to create 4 separate div inside a page and the content of each div comes from a separate component. So far I had successfully rendered all 4 on a single page using Component Factory however the thing I'm trying to achieve is: First component can be static as it's the initial page and there are buttons in the first component, when I click a button in the first component I want the second div to appear next to it (containing a few buttons), and when clicking on a button on the second div the third div should appear next to it. So far what I did is this.

I created 4 separate components named block0, block1, block2 and block3 under a component named dynamic component. I then simply kept the block 1 selector inside the HTML of dynamic component(dynamic.component.html) here's what I did:

<app-block0 (notify)="onGroupReq($event)"></app-block0>
<ng-container #block1></ng-container>
<ng-container #block2></ng-container>
<ng-container #block3></ng-container>

I then created an event emitter in block0Component(this is actually my approach but I'm happy to change it if I get any suggestions along the way). I was able to render the next block(Block1Component) on click on an element in block0 however since block1's selector is not there in dynamic component's HTML file, I'm stuck.

It it made any sense please suggest me what should I try any better approach. Thanks a lot.

Upvotes: 1

Views: 1184

Answers (1)

Pradnya Sinalkar
Pradnya Sinalkar

Reputation: 1146

You can do following steps:

  1. Create a page which will work as a parent page. (Let's say Dashboard or Homepage)
  2. Create 4 components which need to be rendered on DashboardPage. Use selector in those components. Also, export those classes. ex. A selector is map, and a component is MapComponent.
  3. In Dashboard HTML include that selector which will work as a child. ex. <map></map>

Like that you can do for all other components as well.

Upvotes: 2

Related Questions