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?

Answer 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.