Components are the basic building blocks of Angular. In fact, you can think of an Angular web application as a tree of components. When you use the CLI to generate the shell for your Angular application, the CLI also autogenerates one component for you. The filename is app.component.ts and is in the src/app folder. The app component is how your Angular application is bootstrapped—meaning that it is the first component that is loaded, and all the other components are pulled into it. This also means that components can be nested. The previous screenshot shows our project directory structure, with the src/app folder expanded, and the app.component.ts open in the IDE's file editor window. The .ts file extension indicates that it is a TypeScript file. Interesting note—when you write Angular applications, you use TypeScript instead of JavaScript. In fact, the Angular team used TypeScript to write Angular!

After the following Components section, you'll find a complete code listing for our Angular application. There are six files that you'll have to edit. Three of them are already available in the application that you generated with the CLI. The other three will be available in your project once you use the CLI to generate the to-do component, which is the directory that you are presently missing when you compare your project structure to the previous screenshot. You'll find out how to do that in the following Components section, which is why the complete code listing was inserted afterward. Don't worry—follow along, keep the faith that Angular mastery is within your grasp, and you'll be just fine. If you don't believe me, just lie down on the floor and mumble these words, This too, shall pass, three times, slowly.