Lesson Tuesday

In the last lesson, we covered the different pieces of an Angular CLI application. Now it's time to take a closer look at components, the building blocks of an Angular application.

Components are reusable units of code that contain business, user interface logic, HTML and CSS. Everything in Angular is a component, including any navbar, sidebar and content.

We can use Angular CLI to generate new components via the $ ng generate component component-name command (or $ ng g component component-name, for short). For example, we could generate a welcome component with the command $ ng g component welcome.

However, we won't generate a component quite yet. That's because Angular CLI has already generated a root component for us. In fact, Angular CLI has already generated an entire basic application: you can enter the command $ ng serve to see it. While there isn't much there, it's still informative to see how the application looks before we've modified it.

The Root Component

Every Angular application requires a root component. All other components reside in this primary root component. An application can only have one root component.

If you open src/app, you'll see that Angular CLI has already generated five files:

src
├── app
│   ├── app.component.css
│   ├── app.component.html
│   ├── app.component.spec.ts
│   ├── app.component.ts
│   └── app.module.ts

Four of these files begin with app.component. They include the component itself (app.component.ts), tests for the component (app.component.spec.ts), and HTML and CSS for the component (app.component.html and app.component.css, respectively). You can easily guess what each of these files do. We'll be working with all but app.component.spec.ts in this lesson. Whenever we use the command line to generate a new component, Angular CLI will automatically generate these four files for that respective component.

app.module.ts is also an essential part of an Angular application; we'll cover it in more depth in a future lesson. There's only one root module and we won't use the CLI to generate more of them.

The Nerve Center of a Component

Let's take a look at app.component.ts:

app/app.component.ts
import { Component } from '@angular/core';

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

This file is the nerve center of our component. First, it will import any basic functionality it needs. For now, it only needs some core Angular functionality. As we build out various components, we'll often need to import additional functionality as well.

Our component is also broken up into two parts: an annotation and a class declaration. All components have both an annotation and a class declaration, not just the root component, and the basic generated code will look very similar.

The annotation includes all the code inside of @Component. It deals with how our component looks. It tells the component where it should go on the page (the selector), how it should look (the templateUrl), and how it should be styled (the styleUrls). We'll cover this more shortly.

The class declaration includes all the code inside the AppComponent class. The class declaration contains logic that defines the component's behavior. In other words, we'll put our TypeScript code in here. For instance, we'll create a component to display information about each Task. The template will display its description and a checkbox to mark a Task complete. The class declaration will contain a method to actually update that Task's complete property when the checkbox is selected.

Remember, the class annotation determines how a component appears while the class declaration defines how it behaves.

In the next lesson, we'll explore the class annotation in more depth and make our first modifications to our application.