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."
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!