A complete modern Angular guide, from the CLI and components to signals, standalone APIs, SSR, state management, performance, testing, and production architecture.
Angular is a TypeScript-based framework for building single-page applications. It was created by Google and released in 2016 as a complete rewrite of AngularJS. Where AngularJS was a library for adding interactivity to HTML, Angular is a full framework — it comes with routing, forms, HTTP, dependency injection, and a build system out of the…
Before writing a single line of Angular code, you need a working environment. That means Node.js, npm, and the Angular CLI — three tools that install together and stay with you for the life of the project. Get them right, and every other step is smooth. Key point: Angular development happens through the Angular CLI….
The Angular CLI is the command-line interface that drives every part of an Angular project — you use it to create, generate, serve, test, build, and update. Almost everything you do day to day goes through ng, and knowing the core commands is what makes Angular feel productive instead of fiddly. Key point: The CLI…
Every Angular project created by ng new has the same layout. The files fall into three groups — configuration at the root, source code in src/, and dependencies in node_modules/. Knowing what each file does tells you where to make changes and why the CLI put things where it did. Key point: Angular’s structure is…
A component is the fundamental building block of every Angular application. It’s a class decorated with @Component that bundles three things together: the template it renders, the styles it applies, and the logic it runs. Every screen you see in Angular is a tree of components, starting from the root and branching down. Key point:…
A template is the HTML that a component renders. It looks like regular HTML, but Angular extends it with its own syntax — double curly braces, square brackets, parentheses, and asterisks — that connects the markup to the component’s data and behavior. Interpolation is the simplest of those extensions: it renders a component property as…
Interpolation renders text. Bindings do everything else — they push values into the DOM, listen for events coming out of it, and (in the two-way case) keep a value and a form control in sync both ways. Angular has three binding directions: property binding ([prop]=”expr”) sends data from the class into the template, event binding…
Structural directives change the shape of the DOM — they add, remove, or replace elements based on data. The three built-in ones are *ngIf (conditionally include), *ngFor (repeat for each item), and *ngSwitch (pick one of several branches). They’re called “structural” because they don’t just style an element — they decide whether it exists at…
Angular 17 introduced a block syntax for control flow — @if, @for, @switch, and @let — that replaces the old *ngIf, *ngFor, and *ngSwitch directives. The new syntax is built into the template language itself, so it doesn’t need CommonModule imports, it’s faster at runtime, and it reads more like code. Everything the structural directives…
An attribute directive changes the appearance or behavior of an existing element without changing its structure. Where a structural directive decides whether an element exists, an attribute directive says how it looks or behaves while it exists. You’ve already used attribute directives — [class.active] and [style.color] are built-in attribute bindings. Angular also ships a few…