A ngular's @switch block has become a lot more useful recently. With exhaustive type checking, Angular can now catch missing template states when a TypeScript union or enum changes. And with grouped cases, we can remove duplicate markup when multiple states render the same UI. In this post, I'll show both improvements using a real-world example. The Problem: UI States Can Drift from Your Types Let's start with a common pattern. We have a support queue where each ticket has a status: There are four possible statuses, and we’re modeling them with a TypeScript union: type TicketStatus = | ' new ' | ' in-progress ' | ' resolved ' | ' closed ' ; interface Ticket { id : number ; title : string ; customer : string ; status : TicketStatus ; } Enter fullscreen mode Exit fullscreen mode Then, we have a signal containing a list of tickets: protected readonly tickets = signal < Ticket [] > ([ { id : 1024 , title : ' User cannot reset password ' , customer : ' Acme Corp ' , status : ' new ' , }, { id : 1025 , title…