Glossary

173 terms from Angular Beyond the Basics, in plain words, each with the chapter that teaches it.

Search the glossary

#

@defer: A template block whose components become their own chunk and load only when a trigger fires, such as the order history scrolling into view on Alex's page.
@Injectable(): A decorator that marks a class as a service Angular can inject. Without `providedIn: "root"`, it must be provided somewhere, such as route `providers`.
@placeholder / @loading: Optional blocks beside `@defer`: `@placeholder` shows before loading starts and `@loading` shows while the chunk downloads.
@Service(): A decorator that marks a class as a service that Angular can create and inject into components and other services. It is used for shared classes such as a store that holds an app's state (for example `OrderStore`) or an `AuthService`.
[formGroup]: A template binding that connects a `<form>` element to a `FormGroup` in the class.

A

abortSignal: A value a `resource()` loader receives that lets it cancel an out-of-date `fetch` when the params change.
ActivatedRouteSnapshot: A fixed picture of a route at one moment. A resolver gets it and reads `:id` with `paramMap.get("id")`.
afterNextRender: A function that runs a callback once, in the browser only, after the page is first drawn. Use it for browser-only code such as `localStorage` so the server doesn't crash.
Allowed hosts: The list of host names a production SSR server will answer. It's set in `angular.json` or the `NG_ALLOWED_HOSTS` environment variable, and other hosts get a 400 error, which blocks forged-host attacks.
Angular DevTools: A browser extension for Chrome and Firefox whose Profiler tab shows each change detection run and which components took the time.
Angular Material: The Angular team's library of ready-made, themed components such as buttons, form fields and tables, following Material Design 3.
Angular style guide: The official naming and structure conventions at angular.dev/style-guide, such as one class per file and no `.component` suffix.
Angular Update Guide: A page at angular.dev/update-guide where you pick your current and target versions to get a checklist of manual upgrade steps.
as (type assertion): TypeScript syntax that tells the compiler to treat a value as a given type, such as `event.target as HTMLInputElement`.
async / await: JavaScript keywords: `async` lets a method use `await`, which pauses until a promise finishes. `OrderStore.load()` uses them to wait for the API.
async pipe: An older template pipe, `results$ | async`, that subscribes to an Observable and unsubscribes when the template goes away.
AsyncValidatorFn: A validator that returns an Observable of its result, for checks that need a server, such as whether a customer name already exists. The control is PENDING until it answers.

B

Barrel file: An `index.ts` that re-exports a folder's files. Use it sparingly because it can pull in more code than you need.
BehaviorSubject: A Subject that also holds a current value, gives it to each new subscriber at once, and lets you read it with `.value`.
Budget: A size limit in `angular.json` that makes a production build warn or fail when a bundle grows past it.
Bundle: The JavaScript files `ng build` produces from your code. A bigger bundle takes longer to download.

C

canActivateChild: A guard that runs before each child route opens.
CanActivateFn: A guard function that runs as a route opens and returns `true`, `false` or a `UrlTree`. Kettle & Crane's `authGuard` uses it to send logged-out users to /login.
CanDeactivateFn: A guard that runs before the user leaves a route and gets the page's component. `unsavedChangesGuard` uses it to ask "Discard your changes?".
CanMatchFn: A guard that runs while the router looks for a matching route. If it returns `false` the route is skipped and its lazy code never downloads.
catchError: An RxJS operator that replaces an error with another stream, such as `of([])`. Placed inside `switchMap`, a failed request doesn't end the whole search.
CDK (Component Dev Kit): The building blocks under Angular Material that have no look of their own, such as virtual scrolling.
Change detection: Angular's checking of which parts of the page need redrawing. In Angular 22 apps are zoneless and OnPush by default, so a component is checked only when its signals, inputs or events change.
ChangeDetectionStrategy.Eager: A setting the Angular 22 migration adds to old components so they keep their old change detection (checked on every event) instead of the new OnPush default.
Client-side rendering (CSR): Drawing the page in the browser with JavaScript from an almost empty `index.html`. kc-office uses it.
clone (req.clone): A method that makes a changed copy of an HTTP request, since requests can't be edited in place.
Cold / hot stream: A cold stream does nothing until subscribed and gives each subscriber its own run, like `http.get`. A hot stream, such as mouse clicks, runs whether or not anyone listens.
combineLatest: An RxJS function that emits an array of the latest value from each source whenever any one emits, once each has emitted.
computed: A signal whose value is derived from other signals and remembered until they change. Stores use them as selectors.
concatMap: A flattening operator that waits for the running request to finish, then runs the next in order. Use it for saves that must happen in order.
Control flow: The template blocks `@if`, `@for` and `@switch` that show, repeat or choose parts of a page. They replace the older `*ngIf`, `*ngFor` and `*ngSwitch`, which the `control-flow` migration converts.
Creation function: A function that makes an Observable: `of(a, b, c)` delivers its arguments one by one, `from(array)` does the same for an array, and `interval(ms)` counts 0, 1, 2… forever, one number every `ms` milliseconds.
Cross-field validator: A validator on a group that compares several controls, such as `uspsLimit` checking the carrier against the total weight.

D

debounceTime: An RxJS operator that waits for a pause (for example 300 ms) and then passes on only the latest value, so typing "Bloom" sends one request, not five.
declarations: The NgModule list of components that belong to the module. They can use everything the module imports.
Deprecation: A warning that a feature still works but will be removed in a later major version, so replace it now.
dirty / pristine: Form states: `dirty` means the user changed a value, `pristine` means unchanged. `markAsPristine()` resets it after a save so the leave-page guard stays quiet.
disable / enable (form controls): Calling `disable()` on a form control makes it read-only to the user, skips its validators, and excludes its value from the parent group's `value`, though `getRawValue()` still includes it. Calling `enable()` reverses this, making the control editable and validated again.
distinctUntilChanged: An RxJS operator that drops a value equal to the one before it, so Sam's search skips repeated terms.
Dynamic import: `import("./file")` with parentheses loads a module when it runs and returns a promise of its exports. The build turns that file into a lazy chunk.

E

effect: A function that runs once and then again whenever any signals it reads change. It is used to push signal values to something outside the signal system, such as passing a query parameter to a store or copying a resolved order into a form.
Environment file: A file of settings, such as `apiUrl`, chosen per build. Code imports `environment.ts` and the CLI swaps in the development file for `ng serve`.
Event replay: A hydration feature that records clicks made while the page is still loading and replays them once the app takes over.
exhaustMap: A flattening operator that ignores new values while a request is running, handy for a Save button clicked twice.
Express: A popular Node.js web server library. `server.ts` uses it to send built files and hand other requests to Angular.

F

Feature folders: Grouping files by business area (`orders/`, `customers/`), with `core/` for app-wide services and `shared/` for reusable pieces. Features don't import each other.
fetch: The browser's built-in function for making HTTP requests. `CustomerPanel` uses it inside a `resource()` loader.
fileReplacements: An `angular.json` entry under `configurations.development` that makes the CLI swap `environment.ts` for the development file.
finalize: An RxJS operator that runs a function when the Observable completes or fails, useful for timing requests.
firstValueFrom: An RxJS function that turns an Observable into a promise of its first value, so you can `await` an HTTP call.
Flattening operator: An operator that turns each value into an inner Observable, such as a request per search term, and passes its results on. `switchMap`, `mergeMap`, `concatMap` and `exhaustMap` differ in how they handle a new value mid-request.
forkJoin: An RxJS function that waits for every Observable to complete and then emits an array of their last values.
FormArray: A list of form controls, such as one group per order line. You add with `push` and remove with `removeAt`.
formArrayName: A template directive that steps into a `FormArray`. Inside it, `[formGroupName]="$index"` or `[formControlName]="$index"` picks one entry by position.
FormControl: An object that holds one form field's value and state. It is typed, so `customer` is a `FormControl<string>`.
formControlName: A template directive that connects an input to a control in the form group by name.
FormGroup: A named set of form controls whose value is an object.

G

getRawValue: A form method that returns all values including disabled controls. Send it to the server instead of `value`.
Getter: A class method read like a field, such as `this.lines` for `get lines()`.
Guard: A function the router runs before a route opens or closes. It returns `true`, `false` or a `UrlTree` to allow, block or redirect.

H

Host: The name a request was sent to. Angular uses it to build addresses during server rendering.
HTTP status codes: Three-digit numbers a server sends back to say how a request went. Common ones are 401 (not logged in), 404 (not found, such as a missing order) and 400 (bad request, for example when a server rejects a request because its host isn't allowed).
HttpInterceptorFn: The type of an interceptor function. It gets the request and `next`, which sends the request on and returns the reply as an Observable.
httpResource: A function (from Angular Basics) that loads an HTTP GET into signals such as `value()`. Use it for plain GETs and `resource()` for other async work.
Hydration: The browser app starting up, finding the HTML the server made and taking it over (attaching click handlers and signals) instead of redrawing it.

I

Immutable update: Changing state by building a new object with spread instead of editing the old one. Signals compare by identity, so a new object is how they notice a change.
Initial files: The JavaScript that everything `main.ts` imports ends up in. It downloads before the first screen appears.
inject(): A function that gets a service Angular provides, such as `inject(HttpClient)`. It works in field initializers, constructors and guard or interceptor functions.
Injection context: The places where Angular allows `inject()` and functions like `takeUntilDestroyed()` and `toSignal`: field initializers, constructors and guard functions, not ordinary methods.
input() / output(): Functions that declare a component's inputs and outputs. A presentational component takes data through `input()` and reports clicks with `output()`.
Interceptor: A function that sees every HTTP request and reply from `HttpClient` and `httpResource`. Kettle & Crane uses one to add the token and another to handle errors.

J

json-server: A tool that serves a JSON file as a fake REST API, run with `npx json-server db.json` at http://localhost:3000.

L

Lazy chunk: A separate JavaScript file for a feature, downloaded only when the user first opens one of its routes or blocks.
Lazy loading: Downloading a route's code only when it's first opened, so the first screen loads faster.
Library (Angular library): Components and services under `projects/` that several apps, such as kc-office and kc-shop, can share, built and versioned on their own.
Lifecycle hooks: Methods Angular calls at fixed moments: `ngOnInit()` once after inputs are set, `ngOnDestroy()` just before removal.
linkedSignal: A writable signal that is recomputed from a function whenever the signals it reads change, but can also be set in between. Alex's selected order resets to the first one when the list changes.
loadChildren: A route property that lazy loads a whole routes file, whose paths go under the parent's path.
loadComponent: A route property that lazy loads one component through a dynamic import.
localStorage: The browser's small key-value store. It doesn't exist on the server, so code using it must run in `afterNextRender`.
Long-term support (LTS): The last 12 months of a major version's support, with only critical and security fixes.

M

map: An RxJS operator that changes each value, such as turning cents into a dollar string.
Marble diagram: A way to draw streams as dots on a timeline.
mat-form-field: Material's wrapper that draws a labelled box around an input. `<mat-error>` shows only when the control is invalid and touched, and `<mat-select>` with `<mat-option>` replaces `<select>`.
mat-table: Material's table, declared column by column. `[dataSource]` supplies the rows and `matColumnDef` defines each column's header and cells; `MatSort` adds clickable sort headers.
mat.theme: The Sass mixin in `material-theme.scss` that sets the palette. It also defines `--mat-sys-*` CSS variables your own CSS can use.
matButton / matIconButton: Attributes that turn a plain `<button>` into a Material button: `filled`, `outlined`, or plain text. `matIconButton` makes a round icon button.
MatDialog: A Material service that opens a component as a dialog box.
Material Design 3: Google's design system that Angular Material follows.
MatSnackBar: A Material service that shows a short message at the bottom of the screen, with an action button, and hides it after a set duration.
mergeMap: A flattening operator that runs old and new requests at the same time, such as saving several orders in parallel.
Migration: A schematic (a small program that creates or changes project files) that rewrites your code for a new Angular version. `ng update` runs the required ones, and optional ones run with `ng generate @angular/core:<name>`.

N

navigateByUrl: A router method that goes to an address string. `router.navigate` takes an array of parts instead.
ng add: A CLI command that installs a package and runs its setup code, such as `ng add @angular/material`.
ng build: A CLI command that makes a production build and lists the initial and lazy chunks.
ng generate: A CLI command that runs a schematic to create or change files, such as environment files, a library or a migration.
ng new: A CLI command that creates a project. `--ssr` switches on server-side rendering.
ng serve: A CLI command that runs the app in development, rendering on the server too when SSR is on.
ng test: A CLI command that runs your spec files and reports which tests pass. Run it, with `ng build`, before and after an upgrade.
ng update: A CLI command that with no arguments only checks for updates, and with package names upgrades them and runs the required migrations.
ng version: A CLI command that prints the versions of Angular and the CLI your project uses.
ng-container: A grouping element that adds nothing to the page. In a Material table it holds one column's parts.
NgModule: The older way of grouping components in a class with `declarations`, `imports`, `exports`, `providers` and `bootstrap`. New apps use standalone components.
NgOptimizedImage: A directive that applies good image habits. Use `ngSrc` with required `width` and `height`, lazy loading by default, and `priority` for the top image.
NgRx: Libraries that give stores a fixed shape, often used by big teams.
NonNullableFormBuilder: A helper, got with `inject`, that builds typed forms whose controls are all non-nullable, so `reset()` returns them to their start values.
Nx: A tool for very large workspaces with many apps.

O

Observable: An object that delivers values over time to whoever subscribes. `HttpClient` returns one that delivers a response and completes.
Operator: A function that takes an Observable and returns a new one. You chain operators inside `pipe`, and each value flows through them in order.

P

PATCH: An HTTP method that sends only the changes to a resource. `OrderStore.save()` uses it to update an order.
patchValue / setValue: Form methods for loading values: `setValue` needs every control, `patchValue` takes only some.
Path alias: A fixed name for a folder, set under `paths` in `tsconfig.json`, so imports like `@kc/shared/cents.pipe` don't break when files move.
PENDING: A form control status shown while an async validator waits for its answer.
Prefetch on idle: A `@defer` option that downloads the chunk early when the browser is idle but shows the content later.
Preloading: Downloading lazy chunks in the background once the first screen is ready, so later clicks don't wait.
Prerendering: Making a page's HTML once at build time. It suits pages that are the same for everyone, such as /about.
Presentational component: A component that only shows what it gets through `input()` and reports clicks through `output()`, like `OrderTable`.
Promise: A JavaScript object for a value that arrives later. `fetch`, dynamic imports and `firstValueFrom` all give promises.
Pure pipe: A pipe that reruns only when its input changes. Every pipe you write is pure unless you set `pure: false`.

Q

Query parameters: The part of a URL after `?`, such as `?status=new`. With `withComponentInputBinding()` it fills a component input of the same name.

R

Reactive forms: The form API where the model is built in the class from `FormControl`, `FormGroup` and `FormArray`, which you can watch and validate in code. Add `ReactiveFormsModule` to `imports` to bind them.
RedirectCommand: An object that tells the router to redirect to a `UrlTree`. A resolver can return it when a request fails.
Render mode: A per-path setting in `app.routes.server.ts`: `Server` renders on each request, `Prerender` at build time, and `Client` sends an empty page for the browser to draw.
resolve (route): A route property that stores a resolver's result under a name. With `withComponentInputBinding()` it arrives as the component's input of that name.
Resolver: A function that loads a route's data before it opens, so the page appears with its data. `ResolveFn<Order>` produces an `Order`.
resource(): A general way to load async data into signals. Its `params` function reads signals and its `loader` returns a promise, rerunning when the params change.
retry: An RxJS operator that resubscribes up to a set number of times after an error, repeating the request.
RxJS: The library of Observables and operators that Angular's HTTP, forms and router use.

S

scan: An RxJS operator that keeps a running result, like `reduce` but emitting every step.
Selector: A `computed` signal in a store that picks or derives a value from the state, such as `visible` or `newCount`.
Semantic versioning (semver): A version numbering of major.minor.patch where only majors can break your code. In package.json, `^22.2.0` allows newer 22.x versions but never a new major.
Server-side rendering (SSR): Running the Angular app on a server for each request and sending finished HTML, so search engines and link previews see the content.
signal: A value holder that tells Angular when it changes. The store keeps its state in one private signal.
Signal Forms: Angular's newest form API, used in Angular Basics. Use it for new forms; reactive forms remain common in existing apps.
Smart component: A component that injects services, loads data and decides what happens, like `OrderListPage`.
Spec file: A file that holds tests: `describe` names a group, `it` one test and `expect(...).toBe(...)` checks a value. `TestBed` builds services, and `HttpTestingController` fakes the server with `expectOne` and `flush`.
Spread syntax: `{ ...s, filter }` copies every field of `s` and then replaces `filter`. It's how stores make immutable updates.
SSRF: An attack in which a forged host name makes your server fetch from somewhere it shouldn't. Allowed hosts guard against it.
Standalone: An app or component that lists its own `imports` instead of belonging to an NgModule. `bootstrapApplication(App, appConfig)` starts one.
State: The data your screens show and change, which can live in a component signal, a shared service, the URL or the server.
Store: A service that holds one feature's shared state and is the only code that changes it, through its methods. Components read it through selectors.
Structural directive (*): A `*` before a directive turns its element into a template Angular can stamp out many times, like the body of `@for`.
Subject: An Observable you push values into with `next()`. Subscribers get only values sent after they joined.
Subscription: What `subscribe()` returns; calling `unsubscribe()` on it stops the stream. Nothing in an Observable runs until something subscribes.
switchMap: A flattening operator that cancels the running request when a new value arrives, which is right for search because only the latest term matters.

T

take: An RxJS operator that passes the first n values and then completes the stream.
takeUntilDestroyed: An operator that completes a stream when the component is destroyed. Call it in a field initializer or constructor, or pass it a `DestroyRef`.
tap: An RxJS operator that runs a side effect, such as logging, without changing the values.
throwError: An RxJS function that makes an Observable that fails. An interceptor uses it to pass an error on so the code that sent the request still sees it.
Token: A string a real login returns, which the app sends with each request to prove who it is.
toObservable: A function that makes a stream emitting a signal's value now and after each change.
toSignal: A function that subscribes to an Observable, puts each value in a signal and unsubscribes when the component is destroyed.
touched: A form state that is true once the user has left the field. Showing errors only after `touched` keeps a fresh form quiet.
track: The `@for` expression that decides which rows survive a list change. `track o.id` keeps rows by id, while `track $index` matches by position and can rebuild rows.
Transfer cache: During SSR, `HttpClient` stores each reply in the page so the browser app reads it from there instead of calling the API again.
Trigger: The event that makes a `@defer` block load, such as `on viewport`, `on idle`, `on interaction`, `on timer(2s)` or `when cond`.
Typed forms: Reactive forms whose controls have types, such as `FormControl<string>`. Without `nonNullable: true` the type includes `null`, since `reset()` would empty it.

U

Unidirectional data flow: Data flows from the store to the screen, and changes go back only through the store's methods, so every change is easy to find.
updateOn: A control option that sets when validators run, such as on blur instead of every keystroke.
UrlTree: A parsed address a guard can return to redirect the user instead. `parseUrl` turns a string into one.

V

ValidatorFn: The type of a validator function: it gets a control and returns `null` when fine, or a `ValidationErrors` object such as `{ wholeBags: true }`.
Validators: The class of built-in form validators, such as `required`, `min`, `email` and `maxLength`.
valueChanges: An Observable of a control's value, so RxJS operators such as `debounceTime` work on forms.
Virtual scrolling: A CDK feature that creates only the rows that fit in the visible box and reuses them as you scroll, so 5,000 stock moves stay smooth. The viewport needs a fixed height and `itemSize`.

W

Wildcard route: A route with `path: "**"` that matches any address not matched earlier, often used with `redirectTo` to send unknown URLs to a default page. `pathMatch: "full"` makes the empty path match only exactly.
withComponentInputBinding: A router option that hands route parameters, query parameters and resolved data to component inputs of the same name.
withInterceptors: The `provideHttpClient` option that lists interceptors. They run in list order on the way out and reversed on the reply.
Workspace: The folder `ng new` makes, which can hold several projects.