On this page

Angular 21: the framework, CLI, and first project

15 min read TextCh. 1 — Fundamentals

What is Angular?

Angular is a complete framework for building web applications. Unlike libraries such as React or Vue, Angular includes everything you need: routing, forms, HTTP client, testing, SSR, and dependency injection.

In version 21, Angular has matured significantly:

  • Standalone components by default (no NgModules)
  • Signals as the primary reactive primitive
  • New control flow in templates (@if, @for, @switch)
  • SSR and pre-rendering built-in
  • Zoneless change detection (experimental)

Installing Angular CLI

Angular CLI is the command-line tool for creating and managing projects:

# Install globally
npm install -g @angular/cli

# Verify the version
ng version

Creating a project

The ng new command generates a complete project with all configurations:

ng new my-first-app

Angular 21 will ask you about:

  • Style format (CSS, SCSS, etc.)
  • SSR (Server-Side Rendering)

The generated structure includes:

my-first-app/
  src/
    app/
      app.ts              # Root component
      app.routes.ts       # Application routes
    index.html            # HTML entry point
    main.ts               # App bootstrap
    styles.css            # Global styles
  angular.json            # Project configuration
  tsconfig.json           # TypeScript configuration
  package.json            # Dependencies

The root component

Every Angular application has a root component (App). It is the entry point that contains the main layout and the <router-outlet> for rendering pages.

Essential CLI commands

Command Description
ng serve Development server with HMR
ng build Build for production
ng generate component name Generate a component
ng generate service name Generate a service
ng test Run tests
ng e2e End-to-end tests

Angular vs other frameworks

Feature Angular React Vue
Type Complete framework Library Progressive framework
Language TypeScript required JavaScript/TypeScript JavaScript/TypeScript
Reactivity Signals useState/hooks ref/reactive
Routing Built-in React Router (external) Vue Router (external)
HTTP Built-in HttpClient fetch/axios (external) fetch/axios (external)
DI Built-in Context API provide/inject

Angular 21 philosophy

Angular 21 follows the philosophy of simplicity without sacrificing power:

  1. Less boilerplate — No NgModules, no extra decorators
  2. Granular reactivity — Signals gradually replace Zone.js
  3. Performance by default — OnPush, lazy loading, built-in SSR
  4. Developer experience — Powerful CLI, clear error messages, fast HMR

Practice

  1. Create your first project: Run ng new my-practice in the terminal and explore the generated file structure. Identify the root component and the routes file.
  2. Modify the root component: Change the title in app.ts and add a second navigation link in the template. Verify the changes with ng serve.
  3. Generate a component: Use ng generate component greeting to create a new component and render it inside the root component's template.

In the next lesson, we will learn how to create standalone components, the fundamental building block of Angular.

Angular CLI
Install Angular CLI globally with: npm install -g @angular/cli. Then create a project with ng new my-app. Angular 21 configures SSR, signals, and standalone components by default.
Prerequisites
You need Node.js 20+ and basic TypeScript knowledge. Angular 21 uses TypeScript 5.9 with advanced type inference. 
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [RouterOutlet],
  template: `
    <header>
      <h1>{{ title }}</h1>
      <nav>
        <a routerLink="/">Home</a>
        <a routerLink="/about">About</a>
      </nav>
    </header>
    <main>
      <router-outlet />
    </main>
  `,
  styles: `
    header {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
    }
    nav { display: flex; gap: 0.5rem; }
  `,
})
export class App {
  readonly title = 'My first Angular project';
}