Apply `@Component` to a TypeScript class to tell Angular that the class is a component. The decorator supplies metadata that connects the class to an HTML host element and a template. The class can then provide data and logic for bindings in that template. section 2.3.3 section 5.4.1
The most useful configuration properties are:
- `selector`: a CSS selector that matches the component’s host element. An element in the HTML must match it. section 16.2.1
- `template` or `templateUrl`: HTML supplied inline or loaded from a separate file. An external file can make complex content easier to manage. section 5.2.1 section 16.2.1
- `styles` or `styleUrls`: component-template CSS supplied inline or in separate files. section 16.2.1
Connect a component to its page
A root component with `selector: 'app-root'` matches `<app-root></app-root>` in `index.html`. Its `templateUrl` points to the HTML Angular presents there, while `styleUrls` names its CSS file. A store component can instead use `selector: 'store'` and an external template whose bindings read product and category data from the class. section 2.3.3 section 5.4.1 section 9.4.4
Listing 9.23. The contents of the component.ts file in the src/app folder
import { Component } from "@angular/core";
import { Model } from "./repository.model";
@Component({
selector: "app",
templateUrl: "template.html"
})
export class ProductComponent {
private model: Model = new Model();
get count() : number {
return this.model.getProducts().length;
}
}
This complete component imports `Component`, attaches a selector and external template to a class, and exposes a getter for the template’s binding. section 9.6.2
The decorator alone does not place a new component on the page in the shown module-based setup. Declare the class in the application’s Angular module, then add an element matching its selector where the component should appear. A component may start with an empty class and a placeholder template; add behavior as its part of the page develops. section 16.2.1
