At the moment, the
HeroesComponent displays both the list of heroes and the selected hero’s details.
Keeping all features in one component as the application grows will not be maintainable. You’ll want to split up large components into smaller sub-components, each focused on a specific task or workflow.
In this page, you’ll take the first step in that direction by moving the hero details into a separate, reusable
HeroesComponent will only present the list of heroes. The
HeroDetailComponent will present details of a selected hero.
Use the Angular CLI to generate a new component named
ng generate component hero-detail
The command scaffolds the following:
- Creates a directory
Inside that directory four files are generated:
- A CSS file for the component styles.
- An HTML file for the component template.
- A TypeScript file with a component class named
- A test file for the
The command also adds the
HeroDetailComponent as a declaration in the
@NgModule decorator of the