⚠️ This lesson is retired and might contain outdated information.

Control Undefined Angular States with void State

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 8 months ago

Each trigger starts with an “undefined” state or a “void” state which doesn’t match any of your currently defined states. You have to be aware of when you’re in that state so that you don’t stumble on any undesired behaviors. This is especially important if your transitions cover “*”/all states because “void” is part of “all”.

[00:00] Now it's important to notice when I first refresh, you'll see it ease into the stop state. That it starts from the black square and goes to the stop state over this animation time. That's because we're transitioning from any state to any state, and there's actually a transition from the void, or empty state, to other states.

[00:24] Let's duplicate that. We can say from void, and we'll make this animation longer just so you can see it. Now this will take five seconds. It's going from that black square up to the stop state.

[00:41] I'm just going to define this as zero so that it basically starts at whatever state it's going to and there's no animation there. Or you can also define a void state, so copy this style, and I'll just say our void state is blue, and we can go...we'll make this really long again. Now you'll see it'll start at blue and then go to that stop red.

[01:13] However you want to handle it going from not having a state to having a state, because at this point we are setting the state of signal to stop, because it's defined. If we leave this undefined to start with, you'll see that it just starts at that void state, and then it transitioned back to black.

[01:32] That may have been hard to see, but it went to the default styles. If I remove this and I remove this, and now I hit save, this will just stay black until I go to go or stop or go or stop.

[01:49] Be aware that there is this state where signal is not defined, and it's void and it's going from some state to another state the first time that you set this. If you have transitions covering all states, it's going to hit that void state.

egghead
egghead
~ an hour ago

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

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

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!

Markdown supported.
Become a member to join the discussionEnroll Today