Angular Playground — Learn Angular Online with Live Preview, Free

Angular has a reputation for being heavy to get started with. Before writing your first template, a typical setup involves installing Node.js, the Angular CLI, running ng new, waiting for dozens of packages to install, and understanding the project structure before a single component renders. This Angular Playground removes every setup barrier. Open the page and a working Angular-style template is already running in the preview pane — ready to edit, no terminal needed.

The 45 lessons span 13 chapters that take you from your first component through signals, RxJS, reactive forms, lazy loading, change detection strategy, component testing, service testing, and feature architecture. Each lesson is small and focused — one concept demonstrated with a real editable example.

Getting Started and Templates — the foundation Angular builds on

The first six lessons establish the mental model that makes every later Angular concept easier. Hello Angular registers a component and renders it. Interpolation shows {{ expression }} rendering reactive state — change the component's data property and the template updates automatically. Property binding passes real JavaScript values to element properties with [property]="expression". Attribute binding sets ARIA and HTML attributes that have no DOM property equivalent. Class and style binding dynamically add or remove CSS classes and inline styles from the component's state.

These five binding patterns — interpolation, property, attribute, class, style — are the grammar of every Angular template. Understanding them before moving to directives makes *ngIf and *ngFor instantly readable.

Directives — *ngIf and *ngFor

Four directive lessons with interactive previews. *ngIf toggles UI sections based on a boolean condition — toggle the flag and watch Angular add and remove the DOM block. A Conditional Empty States lesson shows the real pattern: *ngIf="items.length; else emptyBlock" with a named <ng-template> for the empty case. *ngFor renders an array as a list — edit the array, add an item, remove one, and watch the list update. Nested Lists shows *ngFor inside *ngFor for a curriculum outline with chapters and topic arrays.

Events & Forms — binding actions and inputs

Four lessons on user interaction. Event binding with (click), (keydown), and $event to handle clicks and keyboard shortcuts. Input events — live character count, auto-format, and debounced search as the user types. Two-way binding with [(ngModel)] on text, checkbox, radio, and select inputs simultaneously. Simple Validation with required and minlength directives, error message display tied to touched && invalid, and submit state management.

Components — inputs and composition

Two lessons on Angular's component model. Component Inputs passes a product object from a parent to a ProductCardComponent using @Input() decorator. Component Composition nests a child component inside a parent container and shows how a layout component wraps a data component — the pattern behind every real Angular page.

Services & Data — dependency injection, shared state, HTTP, and loading patterns

Four lessons on the layer that separates Angular from frameworks without dependency injection. Services and DI introduces @Injectable({ providedIn: 'root' }) and constructor injection — how the same service instance is shared across multiple components. Shared Service State shows a cart service with reactive state shared between a product list and a cart summary. HTTP Client Pattern demonstrates the standard HttpClient.get() pattern with typed responses and a service layer. Loading and Error States builds the full async loading pattern: loading spinner → HTTP request → render data → catch errors and show a message — the template you copy into every real API call.

Routing — outlets, route state, params, and guards

Four routing lessons. Router Outlet shows a top-level outlet with navigation links. Route State reads ActivatedRoute to display the current route information. Route Params reads dynamic :id parameters and uses them to look up data — the pattern behind every detail page. Route Guards implements a canActivate guard that blocks navigation to protected routes — shown as an auth check with a redirect to login.

Pipes & Styling — built-in pipes, display formatting, mini project, custom pipe

Four lessons plus a mini project. Built-in pipes: date, currency, uppercase, lowercase, percent, slice, and async. Display Formatting chains pipes and uses pure pipes for a freelance invoice summary. The Mini Project: Task Board combines everything from the chapter — pipe-filtered status columns, dynamic class binding, and a shared service for task data. Custom Pipe and Directive builds a truncatePipe and a highlightDirective from scratch.

Modern Angular — standalone components, lifecycle hooks, signals, new control flow

Four lessons on where Angular is heading. Standalone Components removes NgModule and uses imports: [] directly in the component decorator — the recommended pattern for new Angular code. Lifecycle Hooks visualises the full sequence: ngOnInit, ngOnChanges, ngAfterViewInit, ngOnDestroy — logged as a live timeline as you interact with the component. Signals Mental Model demonstrates signal(), computed(), and effect() side by side — showing how signals replace Zone.js change detection for granular updates. New Control Flow introduces @if, @else, and @for — Angular 17+ template syntax that replaces *ngIf and *ngFor.

Advanced Forms — reactive forms, FormArray, cross-field validation

Three lessons on production form patterns. Reactive Forms Model builds a FormGroup with FormControl instances, validators, and a submit handler — showing how the form model lives in the class, not the template. Dynamic Form Arrays uses FormArray to add and remove phone number inputs programmatically. Cross-Field Validation writes a custom ValidatorFn that checks two controls against each other — the pattern for password/confirm-password and date-range validators.

RxJS & State — observables, operators, lightweight store

Three lessons on reactive data. Observable Streams wraps a countdown timer and a search input in fromEvent and interval observables. RxJS Operators chains debounceTime, distinctUntilChanged, switchMap, and map for a typeahead search — the exact chain used in real Angular search inputs. Lightweight State Store builds a BehaviorSubject-based store with select() and dispatch() methods — a minimal NgRx-style pattern without the boilerplate.

Architecture & Performance — lazy loading, change detection, trackBy

Three lessons on optimising Angular applications. Lazy Loading configures a route with loadComponent and shows the network waterfall — the bundle is only fetched when the user navigates to that route. Change Detection Strategy sets ChangeDetectionStrategy.OnPush on a component and demonstrates how Angular skips re-rendering when inputs are the same reference. trackBy shows the performance difference between re-rendering a list without trackBy (all DOM nodes replaced) and with trackBy (only changed nodes updated).

Testing & Production — component testing, service testing, error handling, feature architecture

Four lessons on production-readiness. Component Testing writes Jasmine/Jest-style specs: arrange a component, interact with it, and assert on the DOM output — the pattern every Angular unit test follows. Service Testing writes isolated tests for a CartService with mock dependencies. Production Error Handling implements a global ErrorHandler and an HTTP interceptor for 4xx/5xx responses. Feature Architecture shows the recommended folder structure for a real Angular feature module — components, services, models, and routing in one self-contained folder.

Progress and your current lesson are saved to localStorage automatically. Quick Check questions appear on key lessons to test recall. All code runs fully in your browser — no data is uploaded to any server.