A selector property tells Angular where a component belongs in an application’s HTML. It defines the CSS selector used to identify the component’s element or attribute pattern. section 18.4
For ProductItem, selector: "product-item" connects the ProductItem class with product-item elements. Angular then uses the component’s templateUrl to render the matching template. section 18.4
Matching a component in a template
In src/app/productItem.component.ts: @Component({ selector: "product-item", templateUrl: "./productItem.component.html" }) export class ProductItem { } A parent template can then use: <product-item [product]="p" (addToCart)="handleAdd($event)"></product-item> The selector chooses the component; the surrounding attributes and event binding pass data into it and receive notifications from it.
Selectors also connect several components into a larger template. ProductList uses header, category-list, and product-item elements, each corresponding to another component’s selector property. section 18.4.3
Angular resolves these elements only among components configured through the Angular module. The module declares the component classes, while app.component.html begins the composition with <product-list></product-list>. section 18.5
