Skip to content

Commit 9dc3ca4

Browse files
JeanMechethePunderWoman
authored andcommitted
docs: add docs for @switch Exhaustive type checking
1 parent 035b151 commit 9dc3ca4

2 files changed

Lines changed: 54 additions & 0 deletions

File tree

adev/src/content/guide/templates/control-flow.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,3 +133,30 @@ You can specify multiple conditions for a single block by have consecutive `@cas
133133
You can optionally include a `@default` block. The content of the `@default` block displays if none of the preceding case expressions match the switch value.
134134

135135
If no `@case` matches the expression and there is no `@default` block, nothing is shown.
136+
137+
### Exhaustive type checking
138+
139+
`@switch` supports exhaustive type checking, allowing Angular to verify at compile time that all possible values of a union type are handled.
140+
141+
By using `@default never;`, you explicitly declare that no remaining cases should exist. If the union type is later extended and a new case is not covered by an @case, Angular’s template type checker will report an error, helping you catch missing branches early.
142+
143+
```angular-html
144+
@Component({
145+
template: `
146+
@switch (state) {
147+
@case ('loggedOut') {
148+
<button>Login</button>
149+
}
150+
151+
@case ('loggedIn') {
152+
<p>Welcome back!</p>
153+
}
154+
155+
@default never; // throws because `@case ('loading')` is missing
156+
}
157+
`,
158+
})
159+
export class AppComponent {
160+
state: 'loggedOut' | 'loading' | 'loggedIn' = 'loggedOut';
161+
}
162+
```

tools/manual_api_docs/blocks/switch.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,30 @@ You can specify multiple conditions for a single block by having consecutive `@c
3030

3131
**`@switch` does not have fallthrough**, so you do not need an equivalent to a `break` or `return`
3232
statement.
33+
34+
### Exhaustive type checking
35+
36+
`@switch` supports exhaustive type checking, allowing Angular to verify at compile time that all possible values of a union type are handled.
37+
38+
By using `@default never;`, you explicitly declare that no remaining cases should exist. If the union type is later extended and a new case is not covered by an @case, Angular’s template type checker will report an error, helping you catch missing branches early.
39+
40+
```angular-html
41+
@Component({
42+
template: `
43+
@switch (state) {
44+
@case ('loggedOut') {
45+
<button>Login</button>
46+
}
47+
48+
@case ('loggedIn') {
49+
<p>Welcome back!</p>
50+
}
51+
52+
@default never; // throws because `@case ('loading')` is missing
53+
}
54+
`,
55+
})
56+
export class AppComponent {
57+
state: 'loggedOut' | 'loading' | 'loggedIn' = 'loggedOut';
58+
}
59+
```

0 commit comments

Comments
 (0)