Configuring a component

A component is typically a TypeScript class marked with the @Component decorator. Similar to the filename convention, the Angular CLI appends the word Component in the class name. All Angular artifacts are TypeScript classes that follow the same naming principle and have an appropriate decorator. Angular does not recognize them in the context of the framework unless we define the decorator above the class definition. The decorator is used to pass metadata to Angular so that it knows how to create a specific artifact. The metadata of the @Component decorator is a plain object with specific properties:

@Component({

  selector: 'app-hero',

  templateUrl: './hero.component.html',

  styleUrls: ['./hero.component.css']

})

In particular, it defines the following options:

• selector: The name of the component to be identified in an HTML template. It tells Angular where to create the component when it finds the corresponding tag in HTML. The Angular CLI adds the app prefix by default, but you can customize it when creating the Angular project using the --prefix option.
• templateUrl: The path of the component template file, relative to the component class. Alternatively, you can provide the template inline using the template property.
• styleUrls: The path of the component style files, relative to the component class. Notice that this option is an array and accepts multiple files for component styling. Alternatively, you can provide the styles inline using the styles property.

The component template file is an essential property of an Angular component. In the following section, we'll learn in detail how to interact with it.