Angular list of components dynamically created

Question

I have the following scenario, and I am going to use Facebook as an example:

If you look at the news/status feed within Facebook, if I was to implement something similar in Angular, would each status combined with comments and likes, be its own component, or implement it within a *ngFor?

Let's use some code as an example.

Example 1: not a component:

<ul *ngFor="let status of statusses">
    <li>{{status.description}}</li>
    <!-- some more Div tags -->
    <input id="comment" />
    <button id="comment"/>
</ul>

This example will have one component, for instance, Statuses. This component will have an array of all statuses, and logic for clicking on comment button etc.

Example 2: List of components

<!-- List of single status components -->
<ng-template></ng-template>

In this example, the Statuses component will only have logic for retrieving statuses, and the component displaying the status, will be responsible for logic of commenting etc.

Is example two possible within Angular 4+ ?

Is this breaking down in to a too granular approach, or is this expected?

Maybe this can help --> angular.io/guide/component-interaction — Dioux
– Dioux, Commented Jun 18, 2018 at 12:22

CornelC · Accepted Answer · 2018-06-18 13:19:54Z

1

Actually, method 2 is the recommended way.

If you look at the Tour of Heroes example you will see that there is heroes and a hero-detail component.

answered Jun 18, 2018 at 13:19

CornelC

5,3091 gold badge23 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

Angular list of components dynamically created

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