This section is a high-level fly-by on Angular components—just enough coverage of what an Angular component is. Chapter 6, Building Angular Components, is completely dedicated to Angular components and is where we're going to take a deep dive into them. Consider this section to be a little peek behind the component curtain, and when we get to discussing components, we're going to pull the curtains wide open and take a good look at the Component Wizard of Oz. Remember that in the Wizard of Oz story, Dorothy and the gang were petrified of the Wizard, but when he was finally revealed behind the curtains, they all soon stopped being scared. 

As previously mentioned, you can think of components as the basic building blocks or Angular, and of your Angular application as a tree of nested components. Buttons, progress bars, input fields, entire tables, advanced things such as carousels, and even custom video players—these are all components. The components on your web page can communicate with each other, and Angular has a couple of rules and protocols for how they can go about doing so. By the end of this book, you will become very comfortable with the ins and outs of components. You must, for it's simply the way of the Angular guru!

When you write a component file, as in the code that follows, there are three main sections to it. The first is the import section. The middle section is the component decorator, and it's where you indicate what the component's template file is (which defines what the component looks like), and what the components style file is (which is used to style the component).

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
}

The CLI created the app component for us by default when it created our application for us, but how do we create our own components? The easiest way to generate a new component is to use the CLI and issue the following command: $ ng generate component name-of-component. So, to generate a new component named to-doitem, we would type $ ng generate component to-doitem on our command prompt. Remember to do this from within the src | app folder. The CLI will generate this component and insert it into its own folder, and the name of the newly created folder will be the same as the component.

Inside this folder, you will see four new files and their names all start with to-doitem.component because the name of our component is todoitem, and, well, it's a component. We'll discuss what the file ending in spec.ts is used for later, but you may already have a good guess as to what the other three files are for. Let's verify what you are probably already thinking; the component file itself is indeed the one named todoitem.component.ts. This file contains a reference to two of the others: todoitem.component.html, which is the template for the component (the HTML code, for defining its markup structure), and the todoitem.component.scss file, which will hold the styling for the component. Additionally, the CLI modified an existing file named app.module.ts. We'll discuss this file in more detail later on, but for now, all you need to know is that this file acts as a registry for your application's components.

You may be thinking, That's a lot of files. Are they all needed? The short answer to that is no. In  Chapter 5, Flex-Layout – Angular's Responsive Layout Engine, we'll look at how we can eliminate the .html file, and the .scss files, and just put all of our component stuff (the HTML and the styling) into our component file. However, there is a reason the Angular team provided the mechanism to have all these things be separate—so your application's code can be tidy and organized. You can thank them later.

A nice shortcut syntax when using the CLI to generate a component is to type $ ng g c name-of-component, where g is short for generating, and c is short for the component.

In addition to creating our own components from scratch, which we'll look at in depth in Chapter 5, Flex-Layout – Angular's Responsive Layout Engine.