Creating our first component

Components are the basic building blocks of an Angular application. They control different parts of a web page called views, such as a list of products or a registration form. An Angular application consists of a tree of components that can interact with each other:

Figure 3.1 – Component architecture

The architecture of an Angular application is based on components. Each Angular component can communicate and interact with one or more components in the component tree. As we can see in the previous diagram, a component can simultaneously be a parent of some child components and a child of another parent component.

One of the most commonly used commands of the Angular CLI is the generate command, which we use to create certain Angular artifacts. We define the <type> of the artifact and its <name> in the following syntax:

ng generate <type> <name>

You can find a list of available types at https://angular.io/cli/generate#ng-generate.

In this chapter, we are interested in the component type. We will learn how to create other types of artifacts in the following chapters. To create a component, navigate to the root folder of an Angular CLI project and run the following in the command line:

ng generate component hero

If you are using VS Code, consider using the integrated terminal for running Angular CLI commands. Select Terminal | New Terminal from the main menu to open it.

Important Note

In Windows, the integrated terminal of VS Code uses PowerShell by default, which may prevent you from running Angular CLI commands due to security reasons. To change it, click on the dropdown that reads 1: powershell, choose the Select Default Shell option, and select Command Prompt.

Creating an Angular component is a two-step process. It includes the creation of the necessary files of the component and its registration with an Angular module. We'll learn more details about this process in the following sections.

Component file creation

When we run the command in the previous section to generate an Angular component, the Angular CLI creates a hero folder inside the app folder and generates the following files:

Figure 3.2 – Component folder structure

The Angular CLI appends the word component in each filename as a convention. It follows the same principle for all Angular artifacts, such as directives, pipes, and services so that it is easier to find them using the search feature of your IDE, among other files. A typical Angular component consists of the following files:

• Component class: A TypeScript file that contains the data and presentation logic of the component (hero.component.ts).
• Component template: An HTML file that is associated with the class and defines the view of the component (hero.component.html).
• Component styles: A set of CSS styles that are scoped, particularly to the component (hero.component.css). The extension of the file is dependent on the type of styling that you choose when creating a new Angular app.
• Component unit test: A set of unit tests that accompany the component (hero.component.spec.ts).

Module registration

In Chapter 1, Building Your First Angular App, we discussed how Angular works internally to display a component by searching through all the registered components of an Angular application. The Angular CLI registers a component automatically upon its creation by adding it to the declarations property of the main application module, AppModule:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';

import { HeroComponent } from './hero/hero.component';

@NgModule({

  declarations: [

    AppComponent,

    HeroComponent

  ],

  imports: [

    BrowserModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

The declarations property of the @NgModule decorator is the place where we put Angular artifacts that we want to register with a module. These can be components, directives, and pipes. To declare them correctly, we must import them as ES6 modules. Luckily, the Angular CLI adds the import statement for us automatically. We will learn later, in Chapter 5, Structure an Angular App, that an Angular application can have many modules and how to configure them using the @NgModule decorator. Now that we have created a component, let's see how we can configure it appropriately.