In Angular, in what order does KeyValuePipe return an object's entries, and how do you keep the original order instead?

## What `KeyValuePipe` does `KeyValuePipe` (template name `keyvalue`, from `@angular/common`) turns a plain object or a `Map` into an **array of `{ key, value }` pairs** so a template can iterate over it: ```html @for (entry of totalsByTax | keyvalue; track entry.key) { <dt>{{ entry.key }}</dt> <dd>{{ entry.value | currency }}</dd> } ``` The part interviewers ask about is the **order** of that array. ## The default: sorted by key By default the output is **sorted by key**, not left in insertion order. The built-in comparator: - compares two **string** keys lexicographically by UTF-16 code unit, so uppercase letters sort before lowercase and `'10'` sorts before `'9'`; - compares two **number** keys numerically (possible with a `Map`); - sorts `false` before `true` for boolean keys; - puts `null` and `undefined` keys **last**; - falls back to comparing `String(key)` when the two keys have different types. One subtlety: for a plain object the keys are read with `Object.keys()`, so even a `Record<number, V>` produces **string** keys, and `'10'` lands before `'2'`. A `Map` keeps real number keys and sorts them numerically. ## Keeping the original order The pipe takes an optional second argument, a **compare function** `(a: KeyValue<K, V>, b: KeyValue<K, V>) => number`: | Argument | Resulting order | |---|---| | omitted | the default comparator: sorted by key | | a function | whatever the function returns | | `null` | no sorting: the natural order of the input | Passing `null` became possible in Angular 19. For a `Map` the natural order is insertion order; for an object it is JavaScript's own property order, in which integer-like keys come first in ascending order, followed by the remaining string keys in insertion order. ```html @for (entry of totalsByTax | keyvalue: null; track entry.key) { ... } ``` Before v19 the usual workaround was a comparator that always returns `0`, which leaves the relative order untouched. ## Sorting by value instead A comparator can sort on anything, including the value. Define it once as a component field so the pipe receives the same function reference every time: ```ts byAmountDesc = (a: KeyValue<string, number>, b: KeyValue<string, number>) => b.value - a.value; ``` ```html @for (entry of totalsByTax | keyvalue: byAmountDesc; track entry.key) { ... } ``` Keeping it as a field makes it reusable and testable, and guarantees a stable reference; a comparator produced anew on every change detection pass, for example by a method that returns a fresh function, would force a re-sort each time. ## Why it re-runs on every check `KeyValuePipe` is declared **impure** (`pure: false`), so Angular calls it on every change detection pass. That is what lets it notice keys added to the same object. It stays cheap because it keeps a key-value differ: it rebuilds and re-sorts the array only when the differ reports a change or the compare function reference changes, and otherwise returns the same array. ## Signals and other gotchas 1. Pass the **value**, not the signal: `totals() | keyvalue`. Handing it the signal itself makes development builds warn that `KeyValuePipe` does not unwrap signals. 2. `null` or `undefined` input returns `null`, which `@for` treats as an empty list. 3. Typed keys matter: with a `Map<number, V>` numeric sorting is correct; the same data as an object sorts as strings. ## Comparing the options side by side | Goal | Write | |---|---| | Alphabetical by key | `obj \| keyvalue` | | Keep the input's own order | `obj \| keyvalue: null` | | Largest value first | `obj \| keyvalue: byAmountDesc` | | A fixed business order | iterate an array instead | ## When to avoid the pipe If the order is part of the domain, such as tax bands in a fixed legal order, store the data as an **array** in the order you want and iterate it directly. `KeyValuePipe` is best for displaying dictionaries where alphabetical order is acceptable or where a comparator expresses the rule clearly.