I am looking to utilize the new angular @switch statement to display different elements based on an Enum.
enum State {
Loading,
Loaded,
Error
}
@Component({
...
})
export class MyComponent {
state: State = State.Loading;
}
@switch (state) {
@case (State.Loading) {
<p>loading</p>
}
@case (State.Loaded) {
<p>loaded</p>
}
@case (State.Error) {
<p>error</p>
}
}
It appears that referencing the Enum Type directly in html is not possible.
There are a few solutions to this issue.
For instance, I could use the numbers instead of the Enum constants, but this would go against the purpose of using an Enum in the first place.
@switch (state) {
@case (0) {
<p>loading</p>
}
@case (1) {
<p>loaded</p>
}
@case (2) {
<p>error</p>
}
}
Alternatively, I could opt for a Composite type like so:
type State = 'Loading' | 'Loaded' | 'Error';
Is there a way to make this work with enums or should I consider switching to a different type?