Dynamically Display a Task Status with ngSwitch
We'll use the ngSwitch directive to show a different badge next to the task depending on the status of the task. Then for each status we need to handle we'll add a *ngSwitchCase that matches that status.
Instructor: [0:00] We are going to add a new property to our tasks called status. This is going to be of type TaskStatus. This is an enum with the three possible statuses -- to do, in progress, and done.
[0:16] We are going to display that status as a badge here next to the task. For that, I'm using the [undecipherable] badge. We want this label and this color to be different depending on the task status. For that, we are going to create a container, and we are going to give an NgSwitchCase directive to it.
[0:47] This is going to evaluate the status property and render the appropriate badge depending on the status. You can see that it changed to "in progress."