Creating the Presentational Components

In this section, we will use ng generate component to create the PostListComponent and PostItemComponent inside the PostsModule. We will then add a UI to these components and use these components in our container components.

The PostListComponent is responsible for taking in an array of posts using its Input, and it loops over each of these posts and invokes the PostItemComponent.

The PostItemComponent accepts a single post as its Input and displays that post.

Creating the PostListComponent

We will be using the ng generate command to create our PostListComponent. This is the component that will loop over our posts and will be called from our PostsComponent:

1. Open the src/app/posts/container/posts/posts.component.ts file.

2. Update the template to the following:

   <app-post-list [posts]="posts"></app-post-list>

3. Open your terminal and navigate to the project directory.

4. Run the following command from inside the project directory:

   ng g c posts/components/post...