Glossary

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

Search the glossary

#

$event: A special name inside an event binding that holds the browser's event object, or the value an output emitted. In Kettle & Crane's note box, `onNote($event)` reads the typed text from it.
.spec.ts: The file name ending for test files. `ng test` runs every file that ends this way.
<router-outlet />: The tag that marks where the current route's component appears. `App` keeps its nav and swaps only the outlet.
@case / @default: Branches inside `@switch`. The first `@case` whose value equals the switched value is shown, or `@default` if none matches.
@Component: The decorator that turns a TypeScript class into an Angular component. It takes a metadata object with the selector, template, styles and imports.
@empty: A block attached to `@for` that is shown when the list has no items, such as a filter that matches no orders.
@for: A control flow block that repeats part of a template for every item in a list, such as one table row per order. It requires a `track` expression.
@if / @else: A control flow block that shows its part of the template only when a condition is true. `@else if` and `@else` provide the other choices.
@Pipe: The decorator that makes a class a pipe. Its `name` setting is what you write after the `|` in a template.
@Service(): The decorator that marks a class as an app-wide service, so Angular makes one shared copy of it. `@Injectable({ providedIn: "root" })` is the older spelling with the same meaning.
@switch: A control flow block that picks one piece of template by comparing a value against `@case` blocks, like a `switch` statement.
[formField]: A directive that connects an input to a field of the form, keeping both in step. It also keeps number inputs as numbers.
[formRoot]: A directive placed on the `<form>` tag that stops the browser's page reload on Save and runs Angular's submit logic.

A

Angular: Google's free, open-source framework for building web apps in TypeScript. It provides the structure for components, routing, server calls and testing.
Angular CLI: The command-line tool `ng`, which creates, runs, tests and builds Angular projects and generates files such as components.
angular.json: Configuration files in a project's root. `angular.json` holds settings for the CLI, `package.json` for npm and `tsconfig.json` for TypeScript.
API (application programming interface): A set of addresses a program can send requests to in order to get or save data. Kettle & Crane's order API returns and saves orders as JSON.
app.config.ts: The file holding the app's settings as a list of providers. `main.ts` passes it to `bootstrapApplication`.
app.routes.ts: The file that lists the app's routes, saying which component shows for which URL path.
asReadonly(): A signal method that returns a read-only view with no `set` or `update`. It lets a service share its data while only the service can change it.
async / await: JavaScript keywords for waiting on a promise before continuing. Inside an `async` function, `await` pauses until the promise settles, as in `await firstValueFrom(...)` to wait for a server reply.
Attribute binding: A binding like `[attr.aria-label]="..."` that sets an HTML attribute that has no matching DOM property.
Attribute directive: A directive with no template that you put on an existing element as an attribute to change how it looks or behaves, like `appHighlight`.

B

Bootstrap: Starting the app. `main.ts` calls `bootstrapApplication(App, appConfig)` to create `App` and draw it inside `<app-root>`.

C

Chaining (pipes): Using several pipes in a row, such as `date | uppercase`, where each pipe's output feeds the next, left to right.
Change detection: Angular's process of deciding which parts of the page changed and need redrawing. In new apps it is triggered by signals and events.
Class binding: A binding like `[class.new]="..."` that adds a CSS class while the expression is true and removes it when false.
Compile error: A mistake Angular finds while building the app, before the page runs. It shows a code such as NG5002, a message, and the file, line and column.
Component: One piece of the screen, such as an order card: a TypeScript class with a template and styles. An app is built from nested components.
Component styles: CSS in a component's `styles` (or `styleUrl` file) that applies only to that component, so the card's brown `<h2>` doesn't affect other headings.
Component tree: The structure formed when components use each other's tags, with `App` at the root, the list below it and cards below that.
Computed: A read-only signal whose value is worked out from other signals and updates itself when they change. You can't call `set` on it.
Control flow block: Template syntax starting with `@` that decides what to show or repeat: `@if`, `@for` and `@switch`.

D

Data binding: Connecting a component's class to its template. There are four kinds: interpolation, property binding, event binding and two-way binding.
Decorator: A function written as `@Name(...)` just before a class that attaches information Angular reads, such as `@Component`.
Dependency injection (DI): A class says what it needs and Angular creates it and hands it over, rather than the class using `new`. This is how components share one OrderService.
describe / it / expect: The functions used to write tests: `describe` groups tests, `it` defines one test, and `expect(x).toBe(y)` checks that a value is what you expect. `ng test` provides them without an import.
Development server: The small web server that `ng serve` runs. It rebuilds the app every time you save a file.
Directive: A class that adds behavior to an element. Components are directives that also have a template.
dist: The folder where `ng build` puts the finished app files, ready to put on a web server.

E

Effect: Code that runs once at the start and again whenever a signal it reads changes. It suits jobs outside the screen, such as logging or saving to `localStorage`.
emit: The method that fires an output, sending a value to the parent, as in `statusChange.emit('packed')`.
Error codes (NG): Angular's errors start with a code such as `NG5002` or `NG0950`, followed by a message. Look the code up at angular.dev/errors.
Event binding: A binding like `(click)="pack()"` that runs code when an event happens, such as a click or typing.

F

Field tree: What `form()` builds from the model signal: one field per property, such as `orderForm.customer`, each reporting its own state.
firstValueFrom(): An RxJS function that turns an Observable into a promise so you can `await` it. It is handy for waiting on a single HTTP request, such as a PATCH or POST, and throws if the request fails.
Fixture: The wrapper `TestBed.createComponent` returns, used in a test to reach a component and its rendered page.
form(): The Signal Forms function that builds a field tree from a model signal, a schema of validation rules and options such as the submit action.
Framework: Software that supplies an app's whole structure and calls your code to fill in the parts. A library, by contrast, does one job.

G

Generic: A type that takes another type in angle brackets, like `signal<OrderStatus>` or `get<Order[]>`.
Global install (-g): Installing a package with the `-g` flag so its command, such as `ng`, works in every folder.
Guards: Router checks that can stop a visit to a page, for example when nobody is signed in. Covered in the next book.

H

Host: The element a directive is placed on, or a component's own tag. The `host` metadata adds bindings to that element.
HTTP methods (GET, POST, PATCH, DELETE): The verbs of a REST request: GET reads, POST adds, PATCH changes only the fields sent and DELETE removes. Saving KC-1003 as packed sends a PATCH.
HTTP status code: The number a server sends back to say how a request went, such as 200 for success or 404 for not found. In Angular's `HttpErrorResponse`, a status of 0 means no server answered.
HttpClient: Angular's service for sending HTTP requests such as get, post, patch and delete. Its methods return Observables.
HttpErrorResponse: The error object thrown when an HTTP request fails. Its `status` is the HTTP status code (0 means no server answered) and `message` describes the problem.
httpResource: A function that fetches a URL and exposes the result as signals: `value()`, `hasValue()`, `isLoading()`, `error()` and `reload()`. It refetches when signals in its URL change.

I

Immutable update (spread): Changing data by making a new copy, such as `{ ...o, status }`, instead of editing the old object. A signal only notices a new value, so this is how you update an order.
imports: The component metadata list naming the components, pipes and directives its template uses.
inject(): The function a class calls in a field to ask Angular for a service, such as `inject(OrderService)`. It works only while Angular creates the class, called an injection context.
Injector: The part of Angular that creates services and keeps the single shared copy of each.
Input: A value a component receives from its parent, made with `input()`. It is a read-only signal; `input.required` forces the parent to provide it.
Interpolation: `{{ }}` in a template: Angular works out the expression and shows the result as text.
Intl.NumberFormat: A browser feature that formats numbers for a locale, such as showing 55 as $55.00. The `cents` pipe uses it.

J

jsdom: A fake browser written in JavaScript that runs inside Node, so `ng test` can test components without opening a real browser.
JSON (JavaScript Object Notation): A text format for data using objects and arrays, such as the orders json-server returns.
json-server: A small tool that serves a JSON file as a REST API on your computer, used here as a stand-in for Kettle & Crane's real order API.

K

Key event filter: An event name such as `(keyup.enter)` that fires only when that specific key is released.

L

Lazy loading: Downloading a page's code only on the first visit to it. It is covered in the next book.
Live reload: The browser refreshing by itself each time you save a file while `ng serve` runs.
localStorage: A browser feature for saving small amounts of data on the user's computer, which stays after the page is closed. In Angular it is a typical job for an `effect`, which can save a value whenever a signal changes.
Loop variables ($index, $count, $first): Values Angular provides inside an `@for` block: `$index` is the position from 0, `$count` the number of items and `$first` is true on the first row.
LTS (long-term support): The Node.js release line meant for stable, long-lived use and supported with fixes for an extended period. It is the version to install for working with the Angular CLI.

M

Metadata: The object of settings given to a decorator such as `@Component({ ... })`, which Angular reads.
Model: In forms, a signal holding the form's data. `model()` also makes an input the child can set, used with two-way binding.

N

ng build: Command that turns the app into plain files in `dist/` for a real web server.
ng generate: Command that creates files for a component, directive, pipe or service.
ng new: Command that creates a new Angular project and installs its packages. `--defaults` skips the questions.
ng serve: Command that starts the development server at http://localhost:4200 and rebuilds on every save.
ng test: Command that runs every `.spec.ts` file with Vitest and keeps watching; `--watch=false` runs once.
ng update: Command that upgrades a project's Angular packages to the newest version.
NgModule: Older Angular classes that grouped components together. Standalone components replaced them and you don't need them.
Node.js: A program that runs JavaScript outside the browser. The Angular CLI needs it.
npm: Node's package manager, which installs libraries and tools. `npx` runs a tool without installing it, as with `npx json-server`.

O

Observable: A stream of values from RxJS that only starts when you subscribe to it. `HttpClient` Observables give one value and finish.
OnPush: Angular's setting to redraw a component only when its inputs, signals or events change.
Output: A custom event a component sends to its parent, made with `output()` and fired with `emit`.

P

Parent: The component whose template uses another component, the child.
pathMatch: A route setting; `"full"` makes a redirect apply only when the entire path matches, such as the empty path.
Pipe: A small function a template uses to format a value for display, written with `|`. The stored value doesn't change.
Pipe parameters: Extra values written after colons in a pipe, such as `currency:"USD":"symbol":"1.0-0"`. A digits string like `1.0-2` sets minimum integer digits and a range of decimals.
PipeTransform: The Angular interface a custom pipe implements, promising a `transform` method that takes the value and returns what to show.
private / protected: TypeScript keywords limiting who can use a class member. `protected` allows the class and its template; `private` only the class.
Property binding: A binding like `[disabled]="expression"` that sets an element's DOM property and keeps it up to date.
Provider: An entry that tells the injector how to make something. Functions like `provideRouter()` and `provideHttpClient()` add Angular's own services.
Pure pipe: A pipe that reruns `transform` only when its input changes, which makes it cheap in long lists. Pipes are pure by default.

Q

Query string: The part of a URL after `?` that filters results, such as `/orders?status=new` for only new orders.

R

Reactive forms: An older Angular form system, using `FormGroup` and `FormControl`, found in many existing apps.
Redirect: A route that sends one path to another; the empty path sends visitors to `/orders`.
reload(): An `httpResource` method that fetches the data again. It is called after saving a change so the screen matches what the server now holds.
REST: A style of API where each URL names a thing and the HTTP method (GET, POST, PATCH, DELETE) says what to do with it.
Route: An entry pairing a URL `path` with the `component` to show, such as `orders/:id` with `OrderDetail`.
Route parameter: A varying part of a path, such as `:id`, which matches any single segment; `/orders/KC-1003` gives `id` the value `"KC-1003"`.
Router: The Angular service that changes page from code, for example `router.navigate(["/orders"])`.
routerLink: A directive that changes the URL and component without reloading the page, unlike a plain `href`. `routerLinkActive` adds a class to the link of the current page.
Routing: Showing a different component for each URL without reloading the page.
RxJS: A JavaScript library for working with streams of values called Observables, which Angular's `HttpClient` uses and `ng new` installs. Functions like `firstValueFrom()` turn an Observable into a promise.

S

Schema (forms): The function passed to `form()` that receives path `p` to each field and adds validation rules.
Selector: The tag name (or attribute, for a directive) that places a component, such as `app-order-card`.
Service: A class for work and data that isn't about display, such as OrderService. Angular makes one copy and shares it with every component that asks.
Signal: A box holding a value that tells Angular when it changes. You read it by calling it, `packed()`, and change it with `set` or `update`.
Signal Forms: Angular 22's recommended form system, built on a model signal. `form()` creates fields that report value, validity and touched state.
Single-page app: A web app that loads one page and swaps components as you move around, rather than loading new pages.
Singleton: A class with exactly one shared instance, like OrderService.
Standalone component: A component that lists its own `imports`. This is the default, replacing NgModules.
Style binding: A binding like `[style.color]="..."` that sets one CSS property from an expression.
submit(): Angular's function that marks every field touched and runs the submission action only if the form is valid. `[formRoot]` calls it on Save.

T

Template: The HTML a component shows, with Angular's extra syntax. It can be inline in `template` or in a file via `templateUrl`.
Template-driven forms: An older form system using `[(ngModel)]` on each input, suited to very small forms.
TestBed: Angular's testing tool that creates components and services inside a test, drawing templates so you can check and click them.
touched: A form field state that is `true` once the user has left the input. It is used to show error messages only after the user has interacted with the field, so Sam doesn't see red before typing.
track: The required expression in `@for` naming something unique about each item, such as `o.id`. It lets Angular match old rows to new items and redraw only what changed.
Two-way binding: Binding written `[(qty)]="boxes"` that links a parent signal and a child `model()` so both can read and change the value.

U

Unit test: A test that checks one small piece of code on its own, such as `orderTotal()`.
UTC (Coordinated Universal Time): The standard reference time zone that all other time zones are measured from. Passing `"UTC"` to Angular's `date` pipe makes a date like 2026-10-21 show the same day everywhere.

V

Validator: A rule a form field must pass, such as `required`, `min`, `max`, `minLength` or `email`.
Vitest: The test runner that `ng test` uses to run your tests.

W

Wildcard route: A route with path `**` that matches any path no other route matched. It must come last.
withComponentInputBinding(): A router option that hands route parameters, such as `:id`, to a component's inputs of the same name.

Z

Zoneless: Angular apps that redraw because signals changed, without the older zone.js library.