A root component supplies the top-level content for an Angular application. Its @Component selector identifies the element in the main HTML document where Angular applies it; its template defines the content displayed there. An application needs at least one root component, but it can have more than one. section 5.2.1 section 19.2.4
Listing 5.8. Replacing the contents of the app.component.ts file in the src/app folder
import { Component } from "@angular/core";
@Component({
selector: "app",
template: `<div class="bg-success p-2 text-center text-white">
This is SportsStore
</div>`
})
export class AppComponent { }
This minimal AppComponent uses the app selector and an inline template. Its empty class is enough when the root only supplies top-level content. section 5.2.1
The root module lists the component in bootstrap, telling Angular which component to apply. A bootstrapped component must also appear in declarations. The component’s selector must match its target element in the main HTML document. section 19.2.4
Hand off the work to a feature component
Replace the root template’s initial content with <store></store>, matching the store component’s selector, and import StoreModule into the root module. The root still provides the application entry point; the feature component supplies the store content. section 5.4.3
Keeping every feature in the root component makes its logic and template difficult to isolate, test, and maintain. Moving forms, tables, and other work into child components leaves the root to arrange them. When services take over access to shared data, the root may need no class functionality at all. section 16.2 section 18.4.1
Listing 24.2. Replacing the contents of the app.component.html file in the src/app file
<paMessages></paMessages> <router-outlet></router-outlet>
With routing, a compact root template can display messages and provide a router-outlet where Angular places the component matched by the routing configuration. section 24.2.2
A nearly empty root component is a valid arrangement, not a requirement. If it adds no useful layout, the root module can bootstrap multiple components instead, each targeting its own element in the main HTML document. section 19.2.4
