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...