Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To create the Home component in Angular’s official first-app lesson, run ng generate component home from the project directory. Then import the generated component into the root component and add its selector to the root template; generating the files alone does not make the component appear in the app.
1. Generate the Home component
Open a terminal in the Angular project directory and run:
ng generate component homeThe Angular CLI generates the component files. The official first-app lesson uses this command and then checks the app with ng serve. See Angular’s Create Home component lesson and the CLI component reference.
Recommended Free Tools
2. Add Home to the root component
A component renders in a layout when a parent component’s template uses its selector. In the lesson’s starter project, edit src/app/app.ts to import Home from ./home/home, include Home in the root component’s imports array, and place <app-home /> in the root template.
#1 Best Overall
The tutorial’s file paths and selector match its starter project; other workspaces may use different names or locations. Angular explains component structure and selector-based rendering in its components guide.
3. Add the lesson’s filter controls
In src/app/home/home.ts, add the example filter form to the component template, then style it in home.css. The lesson’s form includes an input with the placeholder “Filter by city” and a Search button.
At this point, these are visual controls only: the lesson adds them to the layout without implementing search or filtering behavior. Follow the complete markup and styling in the official lesson.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →4. Run the app and verify the result
- Start the development server from the project directory with
ng serve. - Open the app in a browser and confirm it builds.
- After adding the root import and
<app-home />, confirm the Home component appears in the layout. - After adding the form markup and styles, confirm the city input and Search button are visible.
Check your project’s Angular structure
The steps above follow the standalone-component pattern in the current first-app lesson. The current CLI reference lists standalone generation as the default, but Angular’s components guide says that before Angular 19.0 the default was false. If your project is older or organized around NgModules, inspect its Angular version and existing conventions before copying the lesson’s imports pattern; integration may differ. The CLI also supports inline or separate templates and styles, so use the file arrangement already established by your project. See the component-generation options and component guide.
Quick Recap
Rank #3
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.
