We now have enough knowledge to implement (that is, create in code) the components that we will need for the following three pages of our example application:

• Preview Listing
• Photo Listing
• Preview Photo

To generate those components, we will make use of the Angular CLI schematics. Run the following commands and we should expect the components and required files to be auto-generated:

ng generate component photo-listing
ng generate component preview-listing
ng generate component preview-photo

Once the commands run successfully, we should see the output, as shown in the following screenshot:

In the preceding screenshot, we can notice that the corresponding files have been generated for the component and the app.module.ts file has been updated with the latest components generated.

The final project structure of our application with components generated so far is as follows: