The Main Component in Angular

Files in the app Folder

Before diving into the main component, let's go over the files found in the app folder and their roles in the application.

When you create a new Angular project, everything starts in the app folder. This is where the core files that define the structure of your application are stored. In this section, we'll explore what’s inside this folder and take a closer look at the main component, which serves as the entry point to the user interface.

Main Component

Now, let's take a closer look at the main component, AppComponent. This component is created by default when running the ng new command, and it serves as the root component of the application.

component


              123456789101112
            
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-app';
}

In Angular, components are created using decorators. A decorator is a special function that adds extra functionality to a class.

Within the @Component decorator, we specify important settings that determine how the component will look and behave. Let's break them down:

Key elements in the app.component.ts file:

Selector (selector) – defines how the component will be named in the HTML. In this case, it can be used as <app-root></app-root>;
Imports (imports) – a list of dependencies required for the component to function. In this example, it uses RouterOutlet, which handles displaying content based on the route;
Template (templateUrl) – the path to the HTML file (app.component.html) containing the component's template;
Styles (styleUrls) – the path to the CSS file (app.component.css) defining the component's appearance.

How the Main Component Is Used

The process begins in the index.html file located in the src folder. It doesn't contain typical content, only a basic structure with one special tag:

index


              1234567891011
            
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Angular App</title>
  <base href="/">
</head>
<body>
  <app-root></app-root> <!-- This is where the main component will appear -->
</body>
</html>

This <app-root> tag corresponds to the selector in app.component.ts. When Angular initializes, it finds this tag and replaces it with the content from app.component.html.

Conclusion

The main component is the heart of the application. It loads first and manages the core template. Everything we see on the screen passes through it. The <app-root> tag in index.html is the entry point through which Angular "enters" the page.

1. What does the `@Component` decorator do in Angular?

2. Which file contains the template for the main component?

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 2

Introduction to Angular