Angular - 2-3 The components are important ?

In the previous lesson we looked closely at what happens when we visit localhost:4200 in the browser. We understood that index.html is served, that a bunch of script bundles are injected by the Angular CLI, and that these scripts boot the Angular application. The framework then knows about the application component thanks to main.ts and the AppModule, parses our markup and finds the <app-root> selector. At that point Angular replaces the placeholder with the rendered component template - which is why we never see the "Loading..." text in the running application.

Now that the boot sequence is clear, let's zoom in on what a component actually is and why the @Component decorator matters. Components are the central feature of Angular: you build the entire application by composing small components that you author yourself. We have already started with AppComponent, the root that wraps everything. app-root is therefore the host where we will later nest our other components.

Why components matter

  • Each component has its own template, its own styles and - most importantly - its own logic.
  • A complex page becomes a tree of focused, reusable pieces (header, sidebar, main area, list items...).
  • You can reuse the same component multiple times to replicate UI and behaviour without duplicating code.

Take a typical web page with a header, a navigation, a main area and a sidebar. Each section can be its own component. The header items may themselves be components if it makes sense - it is up to you, and throughout the course you will see how the instructor approaches that split. What matters is the underlying idea: split your application into well-defined pieces rather than dumping everything into a single HTML file and a single script file.

The pay-off is huge. Each component is easy to update, easy to swap and, again, reusable. In the next lesson we will look at how to actually create a new component and we will dissect the role of the @Component decorator that ties the template, the styles and the class together.