TodayTools

Angular flashcards

Google's full framework for large web apps: components, signals, router, forms, HTTP and tooling built in.

Donate
Beginner friendly, starts from zero
Section
How to study
0
AngularStart from zero · 1 of 11

What is Angular, in one plain sentence?

Angular is a free framework from Google for building large web apps, like banking portals, airline booking sites and company dashboards, using .

Angular is a full kit, not a single tool.
Show again
11 left
Got it

Tap to turn over. Swipe right if you know it, left to see it again.

All topics

What you will learn

  1. Start from zero

    • What Angular is and why4 cards
    • First words and setup7 cards

  2. Core basics

    • Components and app start4 cards
    • Signals2 cards
    • Template syntax6 cards
    • Component inputs and outputs3 cards
    • Services and lifecycle2 cards

  3. Next steps

    • Routing3 cards
    • HTTP and data loading4 cards
    • Forms2 cards
    • RxJS and signal effects4 cards
    • Rendering and testing4 cards

  4. Go deeper

    • Change detection and dependency injection4 cards
    • Server rendering and security3 cards
    • Performance3 cards
    • Reusable building blocks3 cards
    • Upgrades and architecture4 cards

Final test and certificate

10 questions drawn fresh from the whole topic, about 15 minutes. Sign in, score 80% or more and get a free certificate with your name and a public check link anyone can open, such as an employer or a teacher. Not signed in? Try a practice test from the cards.

Take the final test

About these cards

  • Reviewed 26 October 2026
  • CoversAngular 22RxJS 7
How these cards are made

Angular at a glance

Angular is a complete framework for building big web apps with TypeScript, with routing, forms, HTTP and testing all included.

Angular is a house built from ready rooms (components) with plumbing (services) carrying data to each room.

Words you will meet

TypeScript
JavaScript with labels saying what kind each value is
Component
One piece of the screen with its data, HTML and styles
Template
The HTML of a component with marks to show data
Service
A helper class that does one job for many components
Signal
A value box that tells Angular when it changes
CLI
The ng command that creates, runs and builds the app

The steps

  1. 1. Start from zero (11 cards): What Angular is, how components and services fit, and the words you need before your first app.
  2. 2. Core basics (17 cards): Standalone components, signals, bindings, control flow, inputs and outputs, services, pipes and the ng CLI.
  3. 3. Next steps (17 cards): Routing and guards, HttpClient and httpResource, interceptors, forms, RxJS, effects, @defer, zoneless and tests.
  4. 4. Go deeper (17 cards): Change detection, injector hierarchy, resources, SSR and hydration, XSS, performance, directives and upgrades.
All 11 cards in Start from zero
What is Angular, in one plain sentence?
Angular is a free framework from Google for building large web apps, like banking portals, airline booking sites and company dashboards, using TypeScript.
How is Angular different from a small library?
A small library does one job, like drawing the page. Angular comes with the whole toolbox: page drawing, page-to-page navigation, forms, talking to servers, testing and a command line tool.
Where do you meet Angular apps in daily life?
Internet banking screens, insurance and tax forms, airline and hotel booking sites, and the tools office staff use all day. Many big company dashboards run on it.
Give an everyday picture of how an Angular app is built.
Think of a house built from ready rooms. Each room (a component) has its own look and job, and helpers (services) bring in water and power (data) to every room that needs them.
Key word: what is TypeScript, and why does Angular use it?
TypeScript is JavaScript with labels saying what kind of value each thing is, like text or number. Angular uses it so mistakes show up while you type, not when users click.
Key word: what is a component?
A component is one piece of the screen with three parts: a TypeScript class holding its data, an HTML template showing it, and styles for its look.
Key word: what is a template?
The HTML of a component, with extra Angular marks to show data and react to clicks. Double curly braces show a value.
Key word: what is a service?
A service is a helper class that does one job for many components, like fetching orders from a server or keeping the signed-in user. Angular hands it to whoever asks.
Key word: what is a signal?
A signal is a box holding a value that tells Angular when it changes, so the screen updates exactly where that value is shown. You read it by calling it like count().
What do you need before learning Angular?
Basic HTML, CSS and JavaScript, and Node.js installed. The Angular CLI then makes a project with one command.
What will you be able to do after this topic?
Build Angular apps from components, use signals, move between pages with the router, call APIs with HttpClient, build forms with validation, test them and make a big app fast.
Angular cheatsheet

Templates

  • {{ value() }} Show a signal
  • [prop]="expr" Property binding
  • (event)="fn()" Event binding
  • @if (cond) { } @else { } Condition
  • @for (x of list; track x.id) { } Loop
  • @defer (on viewport) { } Lazy block
  • value | date: 'd MMM y' Pipe

Signals

  • signal(0) Writable signal
  • s.set(v) / s.update(fn) Change it
  • computed(() => ...) Derived, cached
  • effect(() => ...) Side effect
  • linkedSignal(() => ...) Writable, resets from source
  • toSignal(obs$) Observable to signal

Components and DI

  • input() / input.required() Inputs
  • output<T>() Event out
  • model() Two-way input
  • inject(Service) Get a dependency
  • @Injectable({ providedIn: 'root' }) App-wide service
  • viewChild('ref') Query an element

Router and HTTP

  • provideRouter(routes) Enable routing
  • loadComponent: () => import(...) Lazy page
  • canActivate: [authGuard] Guard a route
  • provideHttpClient(withInterceptors([...])) HTTP with interceptors
  • httpResource(() => url) Fetch as signals

CLI

  • ng new app New project
  • ng serve Dev server
  • ng g c path/name New component
  • ng build Production build
  • ng test Unit tests
  • ng update Upgrade with migrations
Donate