Run ng generate component home from your Angular project directory to create the component. To make it appear, import it into the root component and place its selector in the root template; generating the files alone does not add it to the page.
What an Angular component contains
An Angular component is a TypeScript class with a template and a selector, described by @Component metadata. The template defines the component’s HTML, and the selector is the element name a parent template uses to render it. CSS styles are optional and can be inline or in a separate file.
As an Amazon Associate I earn from qualifying purchases.
This walkthrough follows Angular’s official first-app lesson, whose starter project uses src/app/app.ts for the root component and src/app/home/home.ts for the new component. Other projects may organize files or name root components differently, so follow your workspace’s conventions if they differ. See Angular’s Create Home component lesson and components guide.
Generate the Home component
-
Open a terminal in the Angular project directory—the directory containing the project configuration.
#1 Best Overall
-
Run
ng generate component home. The CLI generates the component files according to the project’s configuration. The current component command reference documents the command asng generate component [name] [options]. -
Start the development server with
ng serveand confirm that the project builds. Creating the component does not, by itself, make its content appear in the app.
Import and render Home in the root component
In the tutorial’s starter project, open src/app/app.ts. Import Home from ./home/home, add it to the root component’s imports array, and add its selector to the root template:
import { Home } from './home/home';
// In the root component's @Component metadata:
imports: [Home],
template: `If the component’s generated metadata or your project structure differs, use the actual export and file path in your workspace. The key is that the parent component must know about Home and include its selector in the parent template. In Angular’s lesson, that selector is app-home, so <app-home /> is what renders the component in the root layout.
Rank #3
Save the file and check the app in the browser. The root content should now include the Home component.
Add the lesson’s initial filter controls
To match the next step in the first-app lesson, edit src/app/home/home.ts and add the example form markup to the component template. Then edit src/app/home/home.css to apply the lesson’s styles. Its visible controls are an input with the placeholder Filter by city and a Search button.
Save the files and check the running app again; the input and button should be visible. At this stage, they are only part of the layout: the lesson does not implement filtering or make the Search button functional. The controls need additional application logic before they can search or filter data.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Check standalone and NgModule conventions
Angular’s current CLI reference lists standalone component generation as the default. However, that default depends on Angular version: the components guide says standalone defaulted to false before Angular 19.0. Older projects or projects built around NgModules may therefore require a different integration pattern than the standalone root-component example above.
Check the Angular version and how neighboring components are declared and imported before changing the generated setup. The CLI generate overview explains that generation uses schematics; the component command reference describes options that affect the generated files and configuration. Keep the new component consistent with the project rather than assuming that every Angular workspace uses the same defaults.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
