How to use nested component in loop Angular?

Question

I have the following JSON structure that I want to show using component:

const rootBlock = {
   id: 1,
   fields: [],
   blocks: [{
      id: 2,
      fields: []
      blocks: []
   }]
} as Block;

There is component BlockComponent.

@Input() block: Block;

I want to show all nested component inside one, how to do that using projection?

<app-block>
   <app-block></app-block>
</app-block>

so what should show the app block? can you share the HTML template? so I can try to create it. — Ashot Aleqsanyan
– Ashot Aleqsanyan, Commented Aug 7, 2020 at 11:26
Block component has template <div class="block"><div>id: {{block.id}}</div><div class="nestedBlocks"></div></div> — user13419533
– user13419533, Commented Aug 7, 2020 at 11:27

Ashot Aleqsanyan · Accepted Answer · 2020-08-07 11:50:51Z

2

In your app-block component, keep a ng-content outlet

block.component.html

<h2>Some text</h2>
<ng-content></ng-content>

Using this, whatever you put inside your tag, they will render, including the same component nested inside.

Update:

block.component.ts

@Input() block: Block;

block.component.html

<div class="block">
  <div> 
    id: {{block.id}}
  </div>
  <ng-container *ngIf="block?.blocks?.length">
    <div class="nestedBlocks" *ngFor="let eachBLock of block.blocks">
       <app-block [block]="eachBLock"></app-block>
    </div>
  </ng-container>
</div>

app.component.html

<app-block [block]="rootBlock"></app-block>

edited Aug 7, 2020 at 11:50

Ashot Aleqsanyan

4,4732 gold badges20 silver badges32 bronze badges

answered Aug 7, 2020 at 11:19

Nayak

7626 silver badges7 bronze badges

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

5 Comments

user13419533 Over a year ago

How it looks in templete? Could you extend the answer?

user13419533 Over a year ago

I have dynamic JSON object it can be a lot of nested blocks

Nayak Over a year ago

I have udated the answer. You can try that.

user13419533 Over a year ago

I need still <ng-content></ng-content>?

Nayak Over a year ago

No. That should not be required anymore for your case.

Collectives™ on Stack Overflow

How to use nested component in loop Angular?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related