Modern Angular 03: Your First Standalone Component

Posted Apr 3, 2026

By Loiane Groner

4 min read

This is lesson 3 of the Modern Angular Course. In the previous lesson, we created our project and made sure everything runs correctly. Now it is time to start building. In this post, we focus on one thing only: creating our first Angular component.

This post is part of the Modern Angular Course series. Check the course page for the full episode list.

In this post, we cover:

Why components are the core building block of Angular applications
How to generate a standalone component with the Angular CLI
What the generated component file looks like
How to run and verify the component’s tests
How to use the component selector to render it in the application
How component composition works in Angular

Why Components Matter

Before writing any code, let’s talk about components.

In Angular, components are the core building blocks of your application. Everything you see on the screen comes from a component.

In modern Angular, components are:

Standalone by default — no NgModule required
Explicit about their dependencies — imports are declared directly on the component
Easy to test and reason about — each component is a self-contained unit

Once you are comfortable with components, everything else in Angular becomes easier to learn.

Generating a New Component

Let’s create our first component using the Angular CLI:

ng generate component hello

Or using the shorthand:

ng g c hello

Angular generates four files:

A component file (hello.ts) — the component class and metadata
A template file (hello.html) — the markup
A style file (hello.scss) — scoped styles
A test file (hello.spec.ts) — a unit test

Notice what is not generated: no module file and no extra configuration. This is the modern Angular default. Every component is standalone out of the box.

Understanding the Component File

Let’s open the generated component and look at what Angular gives us:

  
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  imports: [],
  templateUrl: './hello.html',
  styleUrl: './hello.scss',
})
export class Hello {
}

Key things to notice:

selector — the HTML tag you use to render this component (<app-hello>)
templateUrl and styleUrl — where the markup and styles live
imports array — declared directly on the component, not on a module

Everything this component needs is defined in one place. There is no separate module file to keep in sync. This is what makes standalone components easier to maintain and reason about.

The Component Template

The generated template is simple — and that is intentional. At this point, we just want to understand:

How templates are linked to components
Where markup lives
How Angular renders a component

We will keep templates simple in this lesson and expand them in the next one.

Running the Tests

One thing I want to highlight early is testing.

Angular generates a test file for every component, so let’s make sure it works:

ng test

You should see the tests passing. We are not writing custom tests yet — that comes later in the course — but it is important to know:

Tests are part of the workflow from day one — Angular generates them automatically
Angular is set up for testing by default — you do not have to add testing later
Vitest runs fast — the modern test runner gives you quick feedback

If your tests pass, you know your component is wired up correctly.

Using the Component Selector

Now let’s render this component in the application.

Every Angular component has a selector. First, import the Hello component in app.ts:

  
import { Hello } from './hello/hello';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, Hello],
  // ...
})
export class App {}

Then open app.html and add the component selector:

<app-hello></app-hello>

Or using the self-closing shorthand:

<app-hello />

Refresh the browser, and you should see the component rendered on the page.

This is the basic Angular mental model:

Create a component
Use its selector in a template
Angular takes care of the rest

That is it. No manual registration, no module declarations.

Component Composition

This is how Angular applications are built: small components, composed together, each one responsible for a specific part of the UI.

We are starting very small on purpose. As the course progresses, we will evolve this into a real feature with data, interaction, and state management. But the foundation is always the same — components composed together.

Source Code

The full source code for the course is available on GitHub: loiane/modern-angular.

Next Step

In the next lesson, we start adding real behavior to this component. We will display data in the template, handle user interaction, and learn the basics of template binding. That is when the application starts to feel alive.

Watch the Video