Angular - 3.5 creation of components

With the project configured and Bootstrap wired in, we now create every component identified during the planning step. The exercise: try it by yourself first. Sketch the folders, decide whether each component lives next to AppComponent or nested by feature, and create at least one component manually — without the CLI — to make sure the manual workflow sinks in.

Walkthrough

For the header we create a header folder inside app/ and a header.component.ts by hand. A component is just a TypeScript class decorated with @Component imported from @angular/core. The decorator receives a selector (app-header), a templateUrl pointing to ./header.component.html and we create that file with a quick <h1> placeholder.

Because the component was created manually, Angular does not know about it yet. We must register it in app.module.ts: add the import at the top, then the class to the declarations array. Forgetting this step gives a console error app-header is not a known element — a classic trap when you skip the CLI.

For every other component we lean on the CLI to go faster. The ng generate component command (alias ng g c) lays out the folder, the four files and the module registration in one shot. Adding --skip-tests=true avoids creating the spec file we do not need yet. To nest components by feature, prefix the name with a folder path, otherwise the CLI creates the component at the root of app/:

  • ng g c recipes --skip-tests=true — top-level recipes feature.
  • ng g c recipes/recipe-list --skip-tests=true — recipe list inside the recipes feature.
  • ng g c recipes/recipe-detail --skip-tests=true — recipe detail next to the list.
  • ng g c recipes/recipe-list/recipe-item --skip-tests=true — single item nested in the list.
  • ng g c shopping-list --skip-tests=true + shopping-list/shopping-edit — shopping list and its edit area.

Once every component is generated, Angular registers them automatically and the project tree faithfully mirrors the plan: recipes and shopping list are independent feature folders, each with their children. Created manually or via the CLI, components are now ready to be wired together in the next lesson where we will use them inside app.component.html.

Summary

This lesson teaches how to create Angular components with proper folder structure organization. It demonstrates manually creating a header component to understand the @Component decorator (selector and templateUrl configuration), then explains the common error of forgetting to declare components in AppModule before showing how to use the CLI for rapid component generation.

Key points

  • Organize components into logical feature-based folders, not all at the root directory level
  • Create at least one component manually to understand the @Component decorator, selector property, and templateUrl configuration
  • Always declare new components in the AppModule's declarations array; this is a frequent source of 'component not recognized' errors
  • Use the Angular CLI to quickly generate multiple components with proper file structure and automatic registration
  • Component selector must be unique and should not overwrite existing HTML elements

FAQ

Why do I get an 'is not recognized as an Angular component' error even though I created the component?

The component class exists and was added to the template with its selector, but it wasn't declared in the AppModule's declarations array. You must register every component in the module before Angular can recognize it.

Should I create one folder per component or group components by feature?

Group components by feature or functionality in your folder structure. For example, place header, sidebar, and footer in a 'layout' folder rather than spreading them at the application root level.

What's the difference between manually creating a component and using the CLI?

Manual creation helps you understand component structure (decorator, files, module registration), while the CLI is faster for production work since it automatically generates files and registers the component in the module.