Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Control Undefined Angular States with void State

    2 - ~8.1.1

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



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    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.