A decorator attaches metadata to a class or other declaration. Angular’s @Component decorator identifies a class as a component and supplies configuration for its behavior and generated content. section 2.3.3
The @Component configuration connects the class to the page through three properties:
- selector matches the HTML element where the component’s generated content is introduced. section 2.3.3
- templateUrl identifies the template used for the component. section 2.3.3
- styleUrls identifies the component’s stylesheets. section 2.3.3
Configuring AppComponent
The decorator below declares AppComponent as the app-root component and connects it to its template and styles: @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }). The matching <app-root> element in index.html receives the application content. section 2.3.3
Listing 2.10. Editing the contents of the app.component.ts file in the src/app folder
import { Component } from '@angular/core';
import { TodoList } from "./todoList";
import { TodoItem } from "./todoItem";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
private list = new TodoList("Bob", [
new TodoItem("Go for run", true),
new TodoItem("Get flowers"),
new TodoItem("Collect tickets"),
]);
get username(): string {
return this.list.user;
}
get itemCount(): number {
return this.list.items
.filter(item => !item.complete).length;
}
}
Inspect the complete component file, including imports, decorator configuration, model data, and component properties. section 2.3.3
