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

Define an Angular 2 Trigger and State

1:32 Angular 2 lesson by

Triggers are a special type of directive prefixed with an “@” that allow your elements to be bound to defined animations in the @Component decorator. Each trigger is represented by a defined animation trigger and each trigger can support many states.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Triggers are a special type of directive prefixed with an “@” that allow your elements to be bound to defined animations in the @Component decorator. Each trigger is represented by a defined animation trigger and each trigger can support many states.

Avatar
Johnathan

These Plunkr demos don't seem to work anymore...

Avatar
Alex

You can get them going again by replacing the zone.js reference with this one:
"https://unpkg.com/zone.js@0.6.23?main=browser"

In reply to Johnathan

Let's start just by creating a black square. We'll call this a traffic light. I'll give it a class of traffic light.

We'll style it up using some styles, and we'll say traffic light as a width of 100, a height of 100, and a background color of black. Really fancy.

Now we'll see a nice black square over here, and to make this animate, this needs to have what's called a trigger. We're going to call this trigger signal.

You can name it whatever you want as long as it has the @ sign in front of it that makes it a trigger, and there's always the square brackets around an attribute make it an expression that'll evaluate on the right hand side.

I'm just going to make this a string of go. You can read this as a trigger of signal inciting to a state of go. You define those in here in animations, where you define a trigger, and always make sure to import these, so you'll see I automatically imported it there.

A trigger signal with an array of states. Make sure to import state, and the state we're defining is go. Then states have styles. Make sure to import style, and styles are just basic CSS objects, so background color green.

We have this trigger called signal on a state of go. It's telling it to set the background color to green, and because our signal here is set to go, the state of go, when I hit save, we should see the background color turn green.


Featured course:

Building apps with Ionic 2

Building apps with Ionic 2

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