PricingLoginStart free
Angular Academy logo
HTMLBeginnerWebLevels A1 → C122 languages

Angular Academy

Learn Angular to build scalable and modern web applications with Angular Academy. A CoddyKit learning path of 38 short courses and 144 interactive lessons, with a 24/7 AI tutor at your side.

Courses
38
Lessons
144
Interactive steps
1,803
Free to start
Course 1
GET IT ONGoogle PlayDownload on theApp Store

About the mobile app: Learn Angular: Build Web Apps →

Curriculum

38 courses in this path

Every course in the Angular Academy path, in learning order. The first one is free.

1

A13 lessonsFree

Understand what Angular is, why Google built and maintains it, and how it transforms the way you build large, professional web applications.

  1. 1What is Angular?
  2. 2Why Frontend Frameworks Exist
  3. 3What Angular Apps Look Like
Start learning free
2

A14 lessonsPRO

Scaffold, build, and manage Angular projects efficiently with the Angular CLI.

  1. 1Generating a New Project
  2. 2Project Structure Explained
  3. 3Generating Code with ng generate
  4. +1 more
Start learning freeUnlock with PRO
3

A14 lessonsPRO

Use Angular's modern block control flow syntax for conditionals and loops in templates.

  1. 1Conditional Rendering with @if
  2. 2Looping with @for
  3. 3Switching with @switch
  4. +1 more
Start learning freeUnlock with PRO
4

A13 lessonsPRO

Introduction to Angular 19, exploring its key features, architecture, and environment setup.

  1. 1Getting Started with Angular 19
  2. 2Understanding Components
  3. 3Templates and Data Binding
Start learning freeUnlock with PRO
5

A24 lessonsPRO

Master Angular's reactive signals primitive for fine-grained, efficient state management.

  1. 1What Are Signals
  2. 2Creating and Reading Signals
  3. 3Updating Signals with set and update
  4. +1 more
Start learning freeUnlock with PRO
6

A24 lessonsPRO

Build Angular apps without NgModules using the standalone component architecture.

  1. 1Why Standalone Components
  2. 2Creating Standalone Components
  3. 3Importing Dependencies Directly
  4. +1 more
Start learning freeUnlock with PRO
7

A24 lessonsPRO

Provide and consume services with Angular's hierarchical dependency injection system.

  1. 1Services and Injectable
  2. 2The inject Function
  3. 3Providers and Scopes
  4. +1 more
Start learning freeUnlock with PRO
8

A24 lessonsPRO

Transform displayed data with built-in pipes and create your own custom pipes.

  1. 1Using Built-in Pipes
  2. 2Chaining and Parameterizing Pipes
  3. 3Creating Custom Pipes
  4. +1 more
Start learning freeUnlock with PRO
9

A24 lessonsPRO

Hook into component creation, change, and destruction with Angular lifecycle hooks.

  1. 1ngOnInit and Initialization
  2. 2ngOnChanges and Input Changes
  3. 3ngOnDestroy and Cleanup
  4. +1 more
Start learning freeUnlock with PRO
10

A24 lessonsPRO

Synchronize data between parent and child with two-way binding and signal-based model inputs.

  1. 1Property and Event Binding Recap
  2. 2Two-Way Binding with ngModel
  3. 3model() Signal Inputs
  4. +1 more
Start learning freeUnlock with PRO
11

A24 lessonsPRO

Style components with scoped CSS, view encapsulation modes, and host styling.

  1. 1Component-Scoped Styles
  2. 2View Encapsulation Modes
  3. 3Host and Host-Context Styling
  4. +1 more
Start learning freeUnlock with PRO
12

B14 lessonsPRO

Use the modern signal-based input, output, and view query APIs for cleaner components.

  1. 1Signal Inputs with input()
  2. 2Required and Transformed Inputs
  3. 3Outputs with output()
  4. +1 more
Start learning freeUnlock with PRO
13

B14 lessonsPRO

Derive reactive values with computed signals and run side effects with the effect API.

  1. 1Computed Signals
  2. 2Effects and Side Effects
  3. 3Effect Cleanup and Lifecycle
  4. +1 more
Start learning freeUnlock with PRO
14

B14 lessonsPRO

Understand observables, subscriptions, and subjects as the foundation of Angular reactivity.

  1. 1Observables and Subscriptions
  2. 2Subjects and BehaviorSubject
  3. 3Unsubscribing and Memory Leaks
  4. +1 more
Start learning freeUnlock with PRO
15

B14 lessonsPRO

Build flexible, reusable components with content projection, ng-content, and template references.

  1. 1Single-Slot Content Projection
  2. 2Multi-Slot Projection with select
  3. 3ng-template and ng-container
  4. +1 more
Start learning freeUnlock with PRO
16

B14 lessonsPRO

Bring interfaces to life with Angular's declarative animation system.

  1. 1Animation Basics: trigger and state
  2. 2Transitions and Timing
  3. 3Enter and Leave Animations
  4. +1 more
Start learning freeUnlock with PRO
17

B13 lessonsPRO

Explore advanced component interactions, directives, and best practices.

  1. 1Custom Directives
  2. 2Component Interaction
  3. 3Dynamic Components
Start learning freeUnlock with PRO
18

B13 lessonsPRO

Learn routing, navigation guards, and route resolvers in Angular.

  1. 1Configuring Routes
  2. 2Route Guards
  3. 3Lazy Loading Modules
Start learning freeUnlock with PRO
19

B13 lessonsPRO

Detailed coverage on handling forms in Angular.

  1. 1Template-driven Forms
  2. 2Reactive Forms
  3. 3Custom Validation
Start learning freeUnlock with PRO
20

B24 lessonsPRO

Compose powerful data flows with mapping, filtering, combination, and error operators.

  1. 1Transformation Operators
  2. 2Filtering Operators
  3. 3Combination Operators
  4. +1 more
Start learning freeUnlock with PRO
21

B24 lessonsPRO

Go beyond basic routing with resolvers, route data, parameters, and functional guards.

  1. 1Route Parameters and Query Params
  2. 2Resolvers and Route Data
  3. 3Functional Route Guards
  4. +1 more
Start learning freeUnlock with PRO
22

B24 lessonsPRO

Centralize cross-cutting HTTP concerns with functional and class-based interceptors.

  1. 1Functional Interceptors
  2. 2Adding Auth Headers
  3. 3Handling Errors Globally
  4. +1 more
Start learning freeUnlock with PRO
23

B24 lessonsPRO

Build dynamic, strongly typed reactive forms with FormArray, custom controls, and async validation.

  1. 1Typed Reactive Forms
  2. 2FormArray and Dynamic Fields
  3. 3Async Validators
  4. +1 more
Start learning freeUnlock with PRO
24

B24 lessonsPRO

Compose reusable behavior by applying multiple directives to host components.

  1. 1The hostDirectives Property
  2. 2Exposing Inputs and Outputs
  3. 3Building Reusable Behaviors
  4. +1 more
Start learning freeUnlock with PRO
25

B23 lessonsPRO

Use NgRx to manage application state efficiently.

  1. 1NgRx Store Essentials
  2. 2Actions and Reducers
  3. 3Selectors and Effects
Start learning freeUnlock with PRO
26

B24 lessonsPRO

Architect application state with signals, services, and reactive patterns without external libraries.

  1. 1Signal Stores in Services
  2. 2Deriving State with computed
  3. 3Updating State Immutably
  4. +1 more
Start learning freeUnlock with PRO
27

B24 lessonsPRO

Integrate custom widgets with Angular forms by implementing ControlValueAccessor.

  1. 1The ControlValueAccessor Interface
  2. 2Writing and Registering Values
  3. 3Handling Disabled and Touched States
  4. +1 more
Start learning freeUnlock with PRO
28

B24 lessonsPRO

Test components, services, and pipes with TestBed and the Angular testing utilities.

  1. 1TestBed and Component Fixtures
  2. 2Testing Inputs, Outputs, and DOM
  3. 3Mocking Services and Dependencies
  4. +1 more
Start learning freeUnlock with PRO
29

B24 lessonsPRO

Validate real user flows with end-to-end tests using Playwright and Cypress.

  1. 1E2E Testing Overview
  2. 2Writing Playwright Tests
  3. 3Selectors and Assertions
  4. +1 more
Start learning freeUnlock with PRO
30

B24 lessonsPRO

Localize Angular apps with the built-in i18n system and runtime translation strategies.

  1. 1Marking Text for Translation
  2. 2Extracting and Translating Messages
  3. 3Plurals and Select (ICU)
  4. +1 more
Start learning freeUnlock with PRO
31

B23 lessonsPRO

Master HTTP communication and API integration in Angular.

  1. 1HTTP Client
  2. 2Error Handling
  3. 3API Integration Best Practices
Start learning freeUnlock with PRO
32

C14 lessonsPRO

Optimize rendering with OnPush change detection, zoneless mode, and trackBy strategies.

  1. 1How Change Detection Works
  2. 2OnPush Change Detection
  3. 3Zoneless Angular
  4. +1 more
Start learning freeUnlock with PRO
33

C14 lessonsPRO

Manage complex state with the modern, signal-based NgRx SignalStore.

  1. 1Creating a SignalStore
  2. 2Computed and Methods
  3. 3rxMethod for Async Work
  4. +1 more
Start learning freeUnlock with PRO
34

C14 lessonsPRO

Render Angular on the server for faster first paint and better SEO.

  1. 1Why Server-Side Rendering
  2. 2Setting Up Angular SSR
  3. 3Server Routes and Rendering Modes
  4. +1 more
Start learning freeUnlock with PRO
35

C14 lessonsPRO

Speed up SSR apps with full and incremental hydration to minimize client work.

  1. 1What Is Hydration
  2. 2Enabling Full Hydration
  3. 3Incremental Hydration with @defer
  4. +1 more
Start learning freeUnlock with PRO
36

C14 lessonsPRO

Compose large Angular apps from independently deployable micro frontends.

  1. 1Micro Frontend Architecture
  2. 2Native Federation for Angular
  3. 3Sharing Dependencies
  4. +1 more
Start learning freeUnlock with PRO
37

C14 lessonsPRO

Package and publish reusable Angular libraries with the Angular Package Format.

  1. 1Creating a Library with ng generate
  2. 2Public API and Entry Points
  3. 3Building with ng-packagr
  4. +1 more
Start learning freeUnlock with PRO
38

C13 lessonsPRO

Secure your Angular applications with essential techniques.

  1. 1Authentication and Authorization
  2. 2Cross-Site Scripting (XSS)
  3. 3Secure API Calls
Start learning freeUnlock with PRO
CoddyKit PRO

Unlock all 38 courses in this path, and every other path

AI tutor, certification exam and certificate. Works on web, iOS and Android.

See all plans
Yearly$29.90 / yearAbout $2.49 a monthPay onceLifetime$69.99 onceNo renewals. PRO forever.
Course Overview

Angular: The Framework Behind Production-Scale Web Apps

Angular is Google's opinionated, TypeScript-first framework used to build large, maintainable single-page applications. Its component model, dependency injection system, and first-class tooling make it the framework of choice for enterprise teams and developers who want structure at scale. This track covers the modern Angular — version 19 with standalone components, Signals, and the new control flow syntax — not the legacy patterns from older guides.

What You Will Learn

You will start with the Angular CLI, project structure, and the Angular 19 fundamentals, then move into Signals-based reactivity, standalone components, and dependency injection. From there you will cover template-driven and reactive forms, RxJS operators, HttpClient interceptors, component lifecycle hooks, content projection, animations, and routing. Later courses address state management with NgRx and the Signal-based NgRx SignalStore, unit and end-to-end testing, internationalization, and custom form controls. The track closes with change detection optimization, server-side rendering, hydration, micro frontends with Module Federation, building reusable Angular libraries, and Angular security essentials.

The Learning Path

Thirty-seven courses span A1 through C1. The first eight courses (A1–A2) build the foundation: CLI setup, standalone components, pipes, lifecycle hooks, and two-way binding. The B1 and B2 courses develop applied skills — RxJS, advanced routing, reactive forms, directive composition, and full test coverage. The C1 tier covers what separates production Angular from tutorial Angular: Change Detection and Performance, NgRx SignalStore, Server-Side Rendering with Angular SSR, Micro Frontends with Module Federation, Building Angular Libraries, and Angular Security Essentials.

How It Works

Each course is split into short, hands-on lessons you complete in the built-in code editor with real-time feedback. An AI tutor is available whenever you get stuck, and every concept is reinforced with exercises that run directly in the browser — no local setup required to start.

Tools

Practice with AI, not just read

Supercharge your learning with AI-powered tools and features

AI Code GeneratorGenerate code with AIAI Bug FixFind & fix code errorsPROAI InsightDeep code analysisPROAI ChatChat with AI tutorAsk Super QuestionGet expert-level answersPROCreate LessonAI-powered lesson builderPROStart Certification ExamEarn your certificatePROCode EditorWrite & run codeStart ChallengeTest your skills

How You'll Learn

  1. 01

    Interactive Lessons

    Hands-on coding exercises with real-time feedback

  2. 02

    AI Tutor

    Get instant help from our AI when you're stuck

  3. 03

    Built-in Editor

    Write and run code directly in your browser

  4. 04

    Certificate

    Earn a certificate when you complete the course

Keep exploring

Related learning paths

Sveltejs Academy logoSveltejs AcademyBuild fast and simple user interfaces with modern techniques at Svelte Academy.HTML for Kids logoHTML for KidsIntroduce kids to web development with fun and easy HTML lessons at HTML for Kids.HTML Academy logoHTML AcademyBuild strong foundations in web development by learning HTML at HTML Academy.Frontend Academy logoFrontend AcademyDevelop visually stunning and responsive websites with Frontend Development Academy.Vue Academy logoVue AcademyCreate interactive and efficient user interfaces with Vue.js through Vue Academy.Next.js 15 Fullstack Web Apps logoNext.js 15 Fullstack Web AppsMaster building high-performance, fullstack web applications with Next.js 15, from founda…
FAQ

Frequently Asked Questions

Is the Angular Academy course free?

Yes. You can start the Angular Academy course for free and complete its interactive lessons at no cost. An optional PRO subscription unlocks advanced AI tools and a shareable certificate.

Do I need prior experience to learn HTML?

No. The course begins with the fundamentals and gradually moves to more advanced topics, so you can start even with no prior HTML experience.

How will I learn HTML on CoddyKit?

You learn by doing. Short interactive lessons pair a clear explanation with a hands-on coding exercise that runs in real time, and a 24/7 AI tutor gives personalized help whenever you get stuck.

Do I get a certificate for completing Angular Academy?

Yes. PRO learners can take an exam and earn a shareable certificate of completion with a verifiable code for the Angular Academy course.

Can I learn HTML on my phone?

Yes. CoddyKit is available on the web and as native iOS and Android apps, so you can learn HTML on any device and your progress syncs across them.

How much does CoddyKit PRO cost?

The first course of Angular Academy is free. CoddyKit PRO unlocks every course: $5.90 per week, $7.90 per month, $29.90 per year, or $69.99 once for lifetime access with no renewals.

How long does it take to complete Angular Academy?

Angular Academy has 38 courses and 144 lessons. Most lessons take about 5–10 minutes, so the whole path is roughly 17 hours of hands-on practice, at your own pace.

Start Angular Academy Now

Join thousands of learners mastering programming with AI-powered lessons.

Start learning freeBrowse All Courses