An Angular component decorator supplies metadata that turns a TypeScript class into a component for generating HTML content. The decorator identifies the class and connects it to an HTML template. section 18.2 section 18.4
Configure a component by providing metadata properties such as:
- selector: defines the CSS selector or custom HTML element that causes Angular to apply the component. section 18.4
- templateUrl: identifies the HTML template file associated with the component. section 18.2 section 18.4
- Additional component behavior can use Input and Output decorators so components receive values through attributes and emit custom events. section 18.4
A product component
A ProductItem class can use @Component({ selector: "product-item", templateUrl: "./productItem.component.html" }). Angular applies it wherever the product-item element appears. Its separate template can display product.name and product.price, bind a quantity control, and invoke handleAddToCart when the user clicks a button. section 18.4
Listing 18.20 The contents of the productList.component.html file in the src/app folder
<header [order]="dataSource.order" (submit)="handleSubmit()"></header>
<div class="container-fluid">
<div class="row">
<div class="col-3 p-2">
<category-list [selected]="selectedCategory"
[categories]="categories"
(selectCategory)="handleCategorySelect($event)">
</category-list>
</div>
<div class="col-9 p-2">
<product-item *ngFor="let p of products" [product]="p"
(addToCart)="handleAdd($event)"></product-item>
</div>
</div>
</div>
Inspect how selector-defined custom elements compose several components and connect attributes to inputs and events to outputs. section 18.4.3
