What Angular is

Angular is Google's framework for building single-page applications (SPA): the page loads once, and after that the interface changes without reloading. Unlike libraries that solve one task, Angular gives you everything at once: components, routing, forms, an HTTP client, testing and a build system.

This course targets Angular 20 and newer. It uses the modern approach: standalone components, signals, the new template syntax @if and @for, and the inject() function. Older articles show NgModule modules and the *ngIf and *ngFor directives — that is the previous style. It still works, but new projects do not need it.

What an application is made of

Part	What it does
Component	A piece of the interface: a TypeScript class, an HTML template and styles
Template	HTML with bindings to the component's data
Signal	A value; when it changes, Angular updates the page
Service	A class with shared logic: loading data, keeping state
Route	A link between a page address and a component

What a component looks like

// src/app/hello/hello.ts
import { Component, signal } from '@angular/core';
 
@Component({
  selector: 'app-hello',
  template: `<p>Hello, {{ name() }}!</p>`,
})
export class Hello {
  name = signal('Anna');
}

The @Component decorator turns an ordinary class into a component. Wherever another template contains the tag <app-hello />, the paragraph "Hello, Anna!" appears.

Why TypeScript

Angular is written in TypeScript, and Angular projects are written in TypeScript too. Types let the editor suggest names and catch mistakes before the code runs. The basics are enough: variable types, interfaces, classes.

When Angular fits

A large application built by a team: a user dashboard, an admin panel, a CRM.
You want shared rules: every project has the same structure, and a new developer finds their way quickly.
Long-term support matters: new versions come out on a schedule every six months, and the ng update command helps you upgrade.

For a small website or a single interactive form Angular is too much — plain JavaScript or a lightweight library is enough there.

What we will build

First, a to-do list: adding tasks, marking them done, filters. Then a small blog that loads posts from the test API https://jsonplaceholder.typicode.com: a list of posts, a post page, comments and a form for a new post.

Common mistake

Beginners search the web and copy code with NgModule, *ngIf and app.component.ts files. You can mix the styles, but it gets confusing. Check the article's date and Angular version: for version 17 and newer look for examples that mention standalone, signals and @if.

Thanks for reading!