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 ,…