Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1083 of the free egghead.io lessons, plus get Angular 2 content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Control Undefined Angular 2 States with void State

2:05 Angular 2 lesson by

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”.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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”.

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.

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.

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?