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

Switch Between Angular States on a Trigger

1:04 Angular 2 lesson by

Triggers work in combination with states to define ways of getting from one state to the next. This lesson covers how to create multiple states then cause the trigger assignment to update from one state to the next.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Triggers work in combination with states to define ways of getting from one state to the next. This lesson covers how to create multiple states then cause the trigger assignment to update from one state to the next.

Now we can add a second state, so just take this line and duplicate it. I'll call this state stop, and make the background color red. To get from go to stop I can come in here and change this to stop.

Hit Save, and you'll see this change to red. But now instead of hard coating stop let's cut it out and make a property called signal here. We'll assign that. Now we can assign the trigger of signal to this property of signal, so that whenever this signal changes you'll see that we're still red, because it's just reading in the string of stop.

Whenever the signal changes, the state will change. We'll put a button on there, this will be our go button, on, go, click. In our on, go, click method here we'll say this.signal is go. Now we start at stop, but when I click the go button, it changes screen because it's switching from the stop state to the go state. The background color in the go state is green. .

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